이해의 용이성 | 접근성 체크리스트(웹 콘텐츠 접근성)

기본 언어 표시

요약 설명
주로 사용하는 언어를 명시해야 합니다.
주로 사용하는 언어를 명시하여, 브라우저와 보조 기술이 페이지의 언어를 올바르게 인식하도록 적절한 설정을 적용함으로서 사용자 경험과 접근성을 크게 향상시킬 수 있습니다.

WCAG 2.2 Guidelines : 3.1.1 Language of Page

잘못된 예시 1

페이지의 기본 언어가 명시되지 않아 브라우저와 보조 기술이 언어를 인식할 수 없습니다.

								<!DOCTYPE html>
								<html>
									<head>
										<title>기본 언어 표시 - 잘못된 예시 1</title>
									</head>
									<body>
										<h1>UXKM 홈페이지 입니다.</h1>
									</body>
								</html>

올바른 예시 1

lang 속성을 사용하여 페이지의 기본 언어를 한글(ko)로 명시합니다.

								<!DOCTYPE html>
								<html lang="ko"><!-- 기본 언어 명시 -->
									<head>
										<meta charset="UTF-8"><!-- 문자 인코딩 설정 -->
										<title>기본 언어 표시 - 올바른 예시 1</title>
									</head>
									<body>
										<h1>UXKM 홈페이지 입니다.</h1>
									</body>
								</html>

잘못된 예시 2

일부 콘텐츠가 스페인어로 되어 있지만 언어가 명시되지 않았습니다.

								<!DOCTYPE html>
								<html lang="ko">
									<head>
										<meta charset="UTF-8">
										<title>기본 언어 표시 - 잘못된 예시 2</title>
									</head>
									<body>
										<h1>UXKM 홈페이지 입니다.</h1>
										<p>Bienvenido a nuestro sitio web</p>
									</body>
								</html>

올바른 예시 2

lang="es" 속성을 사용하여 스페인어 콘텐츠를 명시합니다.

								<!DOCTYPE html>
								<html lang="ko">
									<head>
										<meta charset="UTF-8">
										<title>기본 언어 표시 - 잘못된 예시 2</title>
									</head>
									<body>
										<h1>UXKM 홈페이지 입니다.</h1>
										<p lang="es">Bienvenido a nuestro sitio web</p><!-- 스페인 언어 명시 -->
									</body>
								</html>

검수 방법

HTML 문서의 <html> 태그에 lang 속성이 올바르게 설정되어 있는지 확인하였는가?
다국어 콘텐츠가 포함된 경우, 해당 콘텐츠의 lang 속성이 올바르게 설정되어 있는지 확인하였는가?
Axe와 같은 접근성 검사 도구를 사용하여 페이지의 언어 설정이 올바른지 평가하였는가?
WAVE 도구를 사용하여 페이지의 접근성을 검사하였는가?
NVDA, JAWS와 같은 스크린 리더를 사용하여 페이지의 언어가 올바르게 인식되는지 확인하였는가?
브라우저의 개발자 도구를 사용하여 HTML 구조를 검사하고, 언어 속성이 올바르게 설정되었는가?
Google Search Console과 같은 도구를 사용하여 페이지의 언어 설정이 검색 엔진에 올바르게 인식되는지 확인하였는가?

사용자 요구에 따른 실행

요약 설명
사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 합니다.
사용자가 의도하지 않은 기능이 실행되지 않도록 하려면, 사용자 인터페이스 요소가 예상치 못한 방식으로 동작하지 않도록 해야 하고, 특히 새 창 열기, 자동 포커스 변경 등의 동작은 사용자의 명시적인 동작이나 선택에 의해서만 이루어져야 합니다.

WCAG 2.2 Guidelines : 3.2.1 On Focus
WCAG 2.2 Guidelines : 3.2.2 On Input

잘못된 예시 1

사용자가 링크를 클릭할 때, 브라우저 내 이동인지 새 창이 열리는지에 대한 사전 안내가 없어 혼란을 초래할 수 있습니다.

								<a href="https://uxkm.io" target="_blank">UXKM</a>

올바른 예시 1

title="새 창 열림" 속성을 명시함으로써 사용자가 해당 링크가 내부 링크인지 새 창인지 구별하여 콘텐츠를 보다 쉽게 이용할 수 있습니다.

								<a href="https://uxkm.io" target="_blank" title="새 창 열림">UXKM</a>

잘못된 예시 2

의도하지 않은 포커스 변화 : 사용자가 username 필드에 포커스를 줄 때 자동으로 password 필드로 포커스가 이동하면 혼란을 초래할 수 있습니다.

								<input type="text" id="username" onfocus="document.getElementById('password').focus();">
								<input type="password" id="password">

올바른 예시 2

사용자가 입력 필드 사이를 자유롭게 이동할 수 있도록 자동 포커스 이동을 제거합니다.

								<label for="username">Username:</label>
								<input type="text" id="username" name="username">

								<label for="password">Password:</label>
								<input type="password" id="password" name="password">

검수 방법

페이지의 링크를 클릭하여 새 창이 열리지 않는지 확인하였는가?
입력 필드와 상호작용할 때 의도하지 않은 포커스 변화가 발생하지 않는지 테스트하였는가?
Axe와 같은 접근성 검사 도구를 사용하여 의도하지 않은 동작이 없는지 평가하였는가?
WAVE 도구를 사용하여 페이지의 접근성을 검사하였는가?
NVDA, JAWS와 같은 스크린 리더를 사용하여 상호작용 시 의도하지 않은 기능이 실행되지 않는지 확인하였는가?
브라우저의 개발자 도구를 사용하여 이벤트 핸들러와 스크립트를 검사하고, 의도하지 않은 동작이 발생하지 않는지 확인하였는가?
다양한 사용자가 웹 사이트를 탐색하며 의도하지 않은 기능이 실행되지 않는지 피드백을 받았는가?

찾기 쉬운 도움 정보

요약 설명
도움 정보가 제공되는 경우, 각 페이지에서 동일한 상대적인 순서로 접근할 수 있어야 합니다.
도움 정보가 제공되는 경우, 모든 페이지에서 동일한 위치와 접근 방법으로 제공되어야 하고, 사용자는 페이지마다 도움 정보를 찾는 데 혼동을 겪지 않고, 일관된 사용자 경험을 제공받을 수 있습니다.

WCAG 2.2 Guidelines : 3.2.3 Consistent Navigation
WCAG 2.2 Guidelines : 3.2.4 Consistent Identification

잘못된 예시

페이지마다 도움 정보의 위치와 순서가 다르기 때문에, 사용자가 다른 페이지로 이동할 때마다 도움 정보를 찾는 데 어려움을 겪을 수 있습니다.

								<!-- page 1 -->
								<body>
									<h1>Page 1</h1>
									<p>Welcome to Page 1</p>

									<!-- 도움말 정보가 하단에 위치해 있습니다. -->
									<footer>
										<h2>Help Information</h2>
										<p>If you need help, please contact support at <a href="mailto:support@example.com">support@example.com</a>.</p>
									</footer>
								</body>

								<!-- page 2 -->
								<body>
									<h1>Page 2</h1>
									<p>Welcome to Page 2</p>

									<!-- 도움말 정보가 사이드바에 위치해 있습니다. -->
									<aside>
										<h2>Help Information</h2>
										<p>If you need help, please contact support at <a href="mailto:support@example.com">support@example.com</a>.</p>
									</aside>
								</body>

올바른 예시

모든 페이지에서 도움 정보가 항상 같은 위치에 일관되게 제공함으로써, 사용자는 어떤 페이지에서든 도움 정보를 쉽게 찾을 수 있습니다.

								<!-- page 1 -->
								<body>
									<h1>Page 1</h1>
									<p>Welcome to Page 1</p>

									<!-- 도움말 정보가 헤더에 위치해 있습니다. -->
									<header>
										<h2>Help Information</h2>
										<p>If you need help, please contact support at <a href="mailto:support@example.com">support@example.com</a>.</p>
									</header>
								</body>

								<!-- page 2 -->
								<body>
									<h1>Page 2</h1>
									<p>Welcome to Page 2</p>

									<!-- Page 1과 마찬가지로 도움말 정보가 헤더에 위치해 있습니다. -->
									<header>
										<h2>Help Information</h2>
										<p>If you need help, please contact support at <a href="mailto:support@example.com">support@example.com</a>.</p>
									</header>
								</body>

검수 방법

여러 페이지를 탐색하며 도움 정보가 동일한 위치에 있는지 확인하였는가?
도움 정보를 클릭하여 올바른 도움말 페이지로 이동하는지 테스트하였는가?
Axe와 같은 접근성 검사 도구를 사용하여 도움 정보의 일관성을 평가하였는가?
WAVE 도구를 사용하여 도움 정보의 접근성을 검사하였는가?
NVDA, JAWS와 같은 스크린 리더를 사용하여 도움 정보가 각 페이지에서 동일한 방법으로 접근되는지 확인하였는가?
브라우저의 개발자 도구를 사용하여 HTML 구조를 검사하고, 도움 정보가 동일한 위치에 일관되게 제공되는지 확인하였는가?
다양한 사용자가 웹 사이트를 탐색하며 도움 정보를 찾는 데 어려움이 없는지 피드백을 받았는가?

오류 정정

요약 설명
입력 오류를 정정할 수 있는 방법을 제공해야 합니다.
입력 오류 정정은 사용자가 폼이나 입력 필드에서 오류를 발생시켰을 때, 이를 사용자에게 알리고 수정할 수 있는 방법을 제공하는 것을 의미합니다.

WCAG 2.2 Guidelines : 3.3.1 Error Identification

잘못된 예시

사용자가 폼을 제출한 후 오류가 발생하지만, 오류 메시지가 명확하지 않고, 오류를 수정할 수 있는 방법이 제공되지 않습니다.

올바른 예시

입력 오류가 발생할 경우 구체적인 오류 메시지와 함께 어떻게 수정할 수 있는지에 대한 정보를 제공하며, 오류가 발생한 입력 필드를 포커스 하여 편리하게 오류를 정정할 수 있도록 합니다.
aria-describedby="nickname-help"를 설정하여 해당 입력필드가 어떤 정보를 요구하는지에 대한 정보를 제공합니다.
aria-live="assertive"를 설정한 후 오류 메시지가 업데이트될 때 화면 낭독 프로그램(screen reader)에 즉시 알리도록 하여 사용자에게 오류를 실시간으로 전달합니다.

검수 방법

HTML Validator 사용
W3C HTML Validator와 같은 도구를 사용하여 마크업 오류를 자동으로 검수하였는가?
브라우저 개발자 도구 사용
브라우저의 개발자 도구(예: Chrome DevTools)를 사용하여 HTML 구조를 확인하였는가?
수동 검사
HTML 코드를 수동으로 검토하여 태그의 열고 닫음, 중첩 관계, 속성 선언을 확인하였는가?

레이블 제공

요약 설명
용자 입력에는 대응하는 레이블을 제공해야 합니다.
사용자 입력 필드에 대응하는 레이블을 제공하는 것은 입력 필드가 어떤 정보를 요구하는지 사용자에게 명확히 전달하기 위함이며, 레이블은 입력 필드와 시각적으로 또는 프로그래밍 방식으로 연결되어야 합니다.

WCAG 2.2 Guidelines : 2.5.3 Label in Name

잘못된 예시

입력 필드에 레이블을 제공하지 않습니다.

								<input type="text" id="username">

올바른 예시

레이블의 for 속성과 입력 필드의 id를 연결하여 사용자에게 필드의 목적을 명확히 전달하고, 화면 낭독 프로그램(screen reader) 사용자도 입력 필드와 레이블의 관계를 정확히 이해할 수 있습니다.

								<label for="username">Username:</label>
								<input type="text" id="username" name="username">

검수 방법

입력 필드 옆에 레이블이 있는지 검토하였는가?
레이블을 클릭하면 해당 입력 필드로 포커스가 이동하는지 확인하였는가?
Axe, WAVE와 같은 접근성 검사 도구를 사용하여 레이블이 올바르게 제공되었는지 확인하였는가?
브라우저의 개발자 도구를 사용하여 HTML 구조를 확인하고, 입력 필드와 레이블이 적절히 연결되었는지 확인하였는가?
NVDA, JAWS와 같은 스크린 리더를 사용하여 레이블이 입력 필드와 연결되어 올바르게 읽히는지 확인하였는가?

접근 가능한 인증

요약 설명
인증 과정은 인지 기능 테스트에만 의존해서는 안 됩니다.
접근 가능한 인증은 사용자의 인지 기능에만 의존하지 않는 인증 방법을 제공하는 것을 의미합니다. 다양한 인증 방법을 제공하여 모든 사용자가 쉽게 인증 절차를 완료할 수 있도록 해야 합니다.

WCAG 2.2 Guidelines : 3.3.8 Accessible Authentication (Minimum)
Web Authentication : An API for accessing Public Key Credentials

인증방식의 예

브라우저가 아이디/비밀번호를 저장할 수 있도록 마크업된 서식
공개인증(OAuth: Open Authorization)을 통한 제3자 인증방식
신체(얼굴, 지문 등)나 물건(휴대폰, USB 등)을 이용한 인증
사용자 자신에게 익숙하여 별도의 인지적인 노력을 필요로 하지 않는 개인정보(이름, 이메일주소, 전화번호 등) 확인을 통한 인증

잘못된 예시

사용자가 수학 문제를 풀어야 인증할 수 있어 인지 기능에 과도하게 의존합니다.

								<form id="captchaForm">
									<label for="captcha">Please solve the following equation: 3 + 4 = ?</label>
									<input type="text" id="captcha" name="captcha">
									<button type="submit">Submit</button>
								</form>

올바른 예시 1

사용자가 비밀번호 외에도 OTP(One-Time Password)를 사용하여 인증할 수 있는 방법을 제공합니다.

올바른 예시 2

WebAuthn API¹⁾를 사용하여 생체 인식 또는 보안 키를 통한 인증 방법을 제공 합니다.

								<form id="webauthnForm">
									<label for="username">사용자 이름:</label>
									<input type="text" id="username" name="username">
									<button type="button" onclick="authenticate()">WebAuthn을 사용하여 인증하기</button>
									<button type="submit">제출</button>
								</form>

								<script>
									async function authenticate() {
										// WebAuthn API 사용 예제
										try {
											const publicKey = {/* PublicKeyCredentialRequestOptions */};
											const credential = await navigator.credentials.get({publicKey});
											// 자격 증명 응답 처리
											alert('인증 성공');
										} catch (err) {
											alert('인증 실패: ' + err);
										}
									}
								</script>

1) WebAuthn API(Web Authentication API)란?
웹 애플리케이션에서 사용자 인증을 강화하기 위해 설계된 웹 표준 API입니다. 비밀번호를 사용하는 전통적인 인증 방법 대신, 보다 안전하고 편리한 인증 방식을 제공하며, 웹에서 강력한 사용자 인증을 지원하기 위해 FIDO2(Fast IDentity Online 2) 프로젝트의 일부로 개발되었습니다.

검수 방법

다양한 인증 방법이 제공되는지 확인하였는가?
모든 인증 방법이 작동하는지 테스트하였는가?
Axe와 같은 접근성 검사 도구를 사용하여 인증 절차의 접근성을 평가하였는가?
WAVE 도구를 사용하여 인증 절차의 접근성을 검사하였는가?
NVDA, JAWS와 같은 스크린 리더를 사용하여 인증 절차가 올바르게 안내되고 실행되는지 확인하였는가?
인지 기능에 제한이 있는 사용자, 시각 장애인, 청각 장애인 등 다양한 사용자가 인증 절차를 테스트하고 피드백을 제공받았는가?
브라우저의 개발자 도구를 사용하여 HTML 구조와 스크립트를 검사하고, 다양한 인증 방법이 올바르게 구현되었는지 확인하였는가?

반복 입력 정보

요약 설명
반복되는 입력 정보는 자동 입력 또는 선택 입력할 수 있어야 합니다.
반복되는 입력 정보를 자동 입력 또는 선택 입력할 수 있게 함으로써 사용자의 편의성을 높이고 입력 오류를 줄일 수 있으며, 자동 완성, 드롭다운 목록, 브라우저의 자동 완성 기능 등을 통해 구현할 수 있습니다.

WCAG 2.2 Guidelines : 1.4.10 Reflow

잘못된 예시 1

사용자가 동일한 주소를 반복적으로 입력하는 상황을 발생시킬 수 있습니다.

								<form id="shippingForm">
									<label for="address">배송 주소:</label>
									<input type="text" id="address" name="address">

									<label for="billingAddress">청구 주소:</label>
									<input type="text" id="billingAddress" name="billingAddress">

									<button type="submit">제출</button>
								</form>

올바른 예시 1

체크박스를 선택하면 배송 주소가 자동으로 청구 주소로 복사되어 동일한 주소를 반복 입력할 필요가 없습니다.

잘못된 예시 2

사용자가 시/도 명을 직접 입력하면 불편을 초래하고, 오타나 예상치 못한 오류가 발생할 수 있습니다.

								<form id="areaForm">
									<label for="area">시/도 선택:</label>
									<input type="text" id="area" name="area">

									<button type="submit">제출</button>
								</form>

올바른 예시 2

드롭다운 목록을 사용하면 사용자가 시/도 명을 쉽게 선택할 수 있어 입력 필드를 간편하게 이용하고 예상치 못한 오류를 방지할 수 있습니다.

								<form id="areaForm">
									<label for="area">시/도 선택:</label>
									<select id="area" name="area">
										<option value="Seoul">서울특별시</option>
										<option value="Busan">부산광역시</option>
										<option value="Daegu">대구광역시</option>
										<option value="Incheon">인천광역시</option>
										<option value="Gwangju">광주광역시</option>
										<option value="Daejeon">대전광역시</option>
										<option value="Ulsan">울산광역시</option>
										<option value="Gyeonggi">경기도</option>
										<option value="Gangwon">강원도</option>
										<option value="Chungbuk">충청북도</option>
										<option value="Chungnam">충청남도</option>
										<option value="Jeonbuk">전라북도</option>
										<option value="Jeonnam">전라남도</option>
										<option value="Gyeongbuk">경상북도</option>
										<option value="Gyeongnam">경상남도</option>
										<option value="Jeju">제주특별자치도</option>
									</select>

									<button type="submit">제출</button>
								</form>

검수 방법

자동 입력 또는 선택 입력 기능이 제대로 작동하는지 확인하였는가?
사용자가 반복 입력 정보를 쉽게 입력할 수 있는지 테스트하였는가?
Axe, WAVE와 같은 접근성 검사 도구를 사용하여 자동 입력 기능이 접근성을 저해하지 않는지 확인하였는가?
NVDA, JAWS와 같은 스크린 리더를 사용하여 자동 입력 또는 선택 입력 기능이 올바르게 안내되고 실행되는지 확인하였는가?
브라우저의 개발자 도구를 사용하여 HTML 구조와 스크립트를 검사하고, 자동 입력 또는 선택 입력 기능이 올바르게 구현되었는지 확인하였는가?
인지 기능에 제한이 있는 사용자, 시각 장애인, 청각 장애인 등 다양한 사용자가 자동 입력 또는 선택 입력 기능을 테스트하고 피드백을 제공하였는가?

웹 콘텐츠 접근성 이해의 용이성 - by. UXKM

기본 언어 표시

잘못된 예시 1

올바른 예시 1

잘못된 예시 2

올바른 예시 2

검수 방법

사용자 요구에 따른 실행

잘못된 예시 1

올바른 예시 1

잘못된 예시 2

올바른 예시 2

검수 방법

찾기 쉬운 도움 정보

잘못된 예시

올바른 예시

검수 방법

오류 정정

잘못된 예시

올바른 예시

검수 방법

레이블 제공

잘못된 예시

올바른 예시

검수 방법

접근 가능한 인증

인증방식의 예

잘못된 예시

올바른 예시 1

올바른 예시 2

검수 방법

반복 입력 정보

잘못된 예시 1

올바른 예시 1

잘못된 예시 2

올바른 예시 2

검수 방법

웹 접근성 요약 보고서 예시