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

키보드 사용 보장

요약 설명
모든 기능은 키보드만으로도 사용할 수 있어야 합니다.
웹 접근성에서 키보드 사용 보장이란 모든 기능이 키보드만으로도 사용할 수 있어야 한다는 것을 의미합니다. 이는 시각 장애나 지체 장애가 있는 사용자들이 마우스를 사용할 수 없는 경우에도 웹 페이지의 모든 기능을 사용할 수 있도록 하기 위함이며, 키보드 네비게이션, 폼 요소의 접근성, 인터랙티브 요소의 포커스 등이 포함됩니다.

WCAG 2.2 Guidelines : 2.1.1 Keyboard

잘못된 예시

버튼을 마우스 클릭만으로 조작 가능하며, 키보드로는 조작할 수 없습니다.
(예제 우측에 있는 미니 브라우저의 타이틀을 클릭하고 포커스 이동(tab) 해보세요.)

올바른 예시

role="button" 속성을 추가하여 버튼이 아닌 요소가 버튼 역할을 한다고 명시하고, tabindex="0" 속성을 추가하여 키보드 포커스를 받을 수 있게 합니다.
그리고 onkeypress 이벤트를 사용하여 Enter 키로 버튼을 조작할 수 있게 합니다.
(예제 우측에 있는 미니 브라우저의 타이틀을 클릭하고 포커스 이동(tab) 해보세요.)

검수 방법

키보드만 사용하여 웹 애플리케이션의 모든 기능을 탐색하고 조작할 수 있는지 확인하였는가?
Tab, Shift+Tab, Enter, Space, Arrow 키 등을 사용하여 인터페이스 요소가 예상대로 작동하는지 테스트하였는가?
Axe와 같은 접근성 검사 도구를 사용하여 키보드 접근성의 문제를 평가하였는가?
WAVE 도구를 사용하여 키보드 접근성과 관련된 접근성 문제를 검사하였는가?
NVDA, JAWS와 같은 스크린 리더를 사용하여 키보드만으로 모든 기능을 사용할 수 있는지 확인하였는가?
스크린 리더로 각 인터페이스 요소를 탐색하며 키보드 접근성이 보장되는지 확인하였는가?
브라우저의 개발자 도구를 사용하여 HTML 구조와 접근성 속성을 검사하고, 모든 인터페이스 요소가 키보드로 접근 가능한지 확인하였는가?
다양한 사용자가 웹 사이트를 탐색하면서 키보드만으로 모든 기능을 사용하는 데 어려움이 없는지 피드백을 받았는가?

초점 이동과 표시

요약 설명
키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 합니다.
사용자가 키보드를 통해 웹 페이지를 탐색할 때 초점의 위치를 쉽게 인식하고, 초점 이동이 자연스럽게 이루어지도록 해야 합니다.

WCAG 2.2 Guidelines : 2.4.3 Focus Order

잘못된 예시

초점이 이동할 때 시각적 표시가 약하며, 초점 이동의 순서가 논리적이지 않습니다.
아래 예제는 Button 1 다음에 Button 2가 위치하지 않고 text input이 위치함으로써 사용자가 순차적으로 초점을 이동할 때 불편을 겪을 수 있습니다.
(예제 우측에 있는 미니 브라우저의 타이틀을 클릭하고 포커스 이동(tab) 해보세요.)

올바른 예시

:focus 가상 클래스를 사용하여 초점이 맞춰진 요소를 시각적으로 명확히 구별할 수 있도록 하고, 요소의 배치와 순서를 논리적으로 배치하였습니다.
(예제 우측에 있는 미니 브라우저의 타이틀을 클릭하고 포커스 이동(tab) 해보세요.)

검수 방법

키보드만 사용해서 페이지를 탐색하면서 초점 이동이 논리적으로 이루어지는지 확인하였는가?
초점이 맞춰진 요소가 시각적으로 구별되는지 확인하였는가?
Axe 같은 접근성 검사 도구로 초점 이동의 논리성과 시각적 구별 가능성을 평가하였는가?
WAVE 도구로 초점 이동과 관련된 접근성 문제를 검사하였는가?
NVDA나 JAWS 같은 스크린 리더로 초점 이동이 논리적이고 시각적으로 구별 가능한지 확인하였는가?
브라우저의 개발자 도구로 HTML 구조와 CSS 스타일을 검사해서 초점 이동이 제대로 구현되었는지 확인하였는가?
다양한 사용자한테 웹 사이트를 탐색하게 하고 초점 이동과 시각적 구별이 원활한지 피드백을 받았는가?

조작 가능

요약 설명
사용자 입력 및 콘트롤은 조작 가능하도록 제공되어야 합니다.
사용자 입력 및 컨트롤이 조작 가능하게 제공된다는 것은, 모든 사용자(장애가 있는 사용자 포함)가 웹 페이지의 모든 기능을 문제없이 사용할 수 있도록 하는 것을 의미하며, 키보드, 마우스, 터치스크린 등 다양한 입력 장치를 사용하여 웹 페이지를 조작할 수 있어야 함을 포함합니다.

WCAG 2.2 Guidelines : 2.1 Keyboard Accessible

잘못된 예시 1

버튼이 숨겨져 있어 접근할 수 없고, 텍스트 입력 필드가 읽기 전용으로 설정되어 있어 사용자가 입력할 수 없습니다.

올바른 예시 1

버튼이 표시되어 있으며, 텍스트 입력 필드가 조작 가능하게 설정되어 있습니다.

잘못된 예시 2

tabindex="-1" 속성으로 인해 버튼이 키보드 포커스를 받을 수 없습니다.
(예제 우측에 있는 미니 브라우저의 타이틀을 클릭하고 포커스 이동(tab) 해보세요.)

올바른 예시 2

버튼이 키보드 포커스를 받을 수 있도록 설정되어 있습니다.
(예제 우측에 있는 미니 브라우저의 타이틀을 클릭하고 포커스 이동(tab) 해보세요.)

검수 방법

키보드, 마우스, 터치스크린 등 다양한 입력 장치를 사용해서 웹 페이지의 모든 기능을 테스트하였는가?
모든 버튼, 링크, 입력 필드 등이 조작 가능한지 확인하였는가?
Axe 같은 접근성 검사 도구로 사용자 입력 및 컨트롤의 접근성을 평가하였는가?
WAVE 도구로 조작 가능 여부를 검사하였는가?
NVDA나 JAWS 같은 스크린 리더로 모든 사용자 입력 및 컨트롤이 접근 가능하고 조작 가능한지 확인하였는가?
브라우저의 개발자 도구로 HTML 구조와 CSS 스타일을 검사하여 모든 사용자 입력 및 컨트롤이 조작 가능하게 설정되었는지 확인하였는가?
다양한 사용자에게 웹 사이트를 탐색하게 하고 모든 기능을 문제없이 사용할 수 있는지 피드백을 받았는가?

문자 단축키

요약 설명
문자 단축키는 오동작으로 인한 오류를 방지하여야 합니다.
문자 단축키는 오동작을 방지할 수 있도록 설계되어야 하며, 사용자에게 혼란을 주지 않도록, 단축키를 사용할 때 명확한 컨텍스트가 필요하거나 추가 키(예: Ctrl, Alt, Shift)와 함께 사용해야 함을 의미합니다.

WCAG 2.2 Guidelines : 2.1.4 Character Key Shortcuts

잘못된 예시

사용자가 입력 필드에 텍스트를 입력할 때 'a' 키를 누르면 의도하지 않은 동작이 발생할 수 있습니다.

올바른 예시

'Ctrl' 키와 함께 'a' 키를 눌러야 단축키가 작동하도록 하여 오동작을 방지할 수 있습니다.

검수 방법

다양한 입력 시나리오를 테스트하여 단축키가 의도치 않게 작동하지 않는지 확인하였는가?
단축키를 사용할 때 추가 키(예: Ctrl, Alt, Shift)와 함께 사용하도록 설정되었는가?
Axe 같은 접근성 검사 도구로 문자 단축키 사용의 접근성을 평가하였는가?
WAVE 도구로 단축키 사용과 관련된 접근성 문제를 검사하였는가?
NVDA나 JAWS 같은 스크린 리더로 단축키가 올바르게 작동하고, 오동작을 방지하도록 설정되었는지 확인하였는가?
브라우저의 개발자 도구로 단축키 이벤트 리스너와 스크립트를 검사하고, 오동작을 방지하기 위한 추가 키 설정이 올바르게 구현되었는지 확인하였는가?
다양한 사용자에게 웹 사이트를 탐색하게 하여 단축키 사용에 불편함이 없는지 피드백을 받았는가?

응답시간 조절

요약 설명
시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 합니다.
시간제한이 있는 콘텐츠는 사용자가 응답시간을 조절할 수 있도록 해야 하며, 사용자가 콘텐츠를 충분히 읽고 이해하며 상호작용할 수 있는 시간을 제공하는 것을 의미합니다. 사용자는 시간을 연장하거나, 일시 정지하거나, 시간제한을 제거할 수 있는 옵션을 제공받아야 합니다.

WCAG 2.2 Guidelines : 2.2.1 Timing Adjustable

잘못된 예시

시간 제한이 고정되어 있어 사용자가 조절할 수 없습니다.

올바른 예시

사용자가 시간을 연장하거나 일시 정지하거나 다시 시작할 수 있는 옵션을 제공하여 응답시간을 조절할 수 있습니다.

검수 방법

시간을 연장, 일시 정지 및 다시 시작할 수 있는 옵션이 제공되는지 확인하였는가?
다양한 시나리오에서 시간이 올바르게 조절되는지 테스트하였는가?
Axe 같은 접근성 검사 도구로 시간제한 조절 기능의 접근성을 평가하였는가?
WAVE 도구로 시간제한 조절 기능과 관련된 접근성 문제를 검사하였는가?
NVDA나 JAWS 같은 스크린 리더로 시간제한 조절 기능이 올바르게 작동하고 접근 가능한지 확인하였는가?
브라우저의 개발자 도구로 시간제한 조절 스크립트와 HTML 구조를 검사하고, 모든 기능이 올바르게 구현되었는지 확인하였는가?
다양한 사용자에게 웹 사이트를 탐색하게 하여 시간제한 조절 기능을 사용하는 데 어려움이 없는지 피드백을 받았는가?

정지 기능 제공

요약 설명
자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 합니다.
자동으로 변경되는 콘텐츠는 사용자가 이를 제어할 수 있도록 기능을 제공해야 하며, 사용자가 콘텐츠의 자동 변환을 멈추거나 일시 정지할 수 있는 옵션을 포함하여 시각적 혼란을 최소화하는 것을 의미합니다.

WCAG 2.2 Guidelines : 2.2.2 Pause, Stop, Hide

잘못된 예시

자동 슬라이드쇼를 제어할 수 있는 방법이 없습니다.

올바른 예시

사용자가 슬라이드쇼를 일시 정지하거나 다시 시작할 수 있는 버튼을 제공하여 자동으로 변경되는 콘텐츠를 제어할 수 있습니다.

검수 방법

콘텐츠의 자동 변환을 멈추거나 일시 정지할 수 있는 옵션이 제공되는지 확인하였는가?
다양한 시나리오에서 제어 기능이 올바르게 작동하는지 테스트하였는가?
Axe 같은 접근성 검사 도구로 자동으로 변경되는 콘텐츠 제어 기능의 접근성을 평가하였는가?
WAVE 도구로 제어 기능과 관련된 접근성 문제를 검사하였는가?
NVDA나 JAWS 같은 스크린 리더로 자동으로 변경되는 콘텐츠 제어 기능이 올바르게 작동하고 접근 가능한지 확인하였는가?
브라우저의 개발자 도구로 제어 스크립트와 HTML 구조를 검사하여 모든 기능이 올바르게 구현되었는지 확인하였는가?
다양한 사용자에게 웹 사이트를 탐색하게 하여 자동으로 변경되는 콘텐츠 제어 기능을 사용하는 데 어려움이 없는지 피드백을 받았는가?

깜빡임과 번쩍임 사용 제한

요약 설명
초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 합니다.
초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠는 사용자가 발작을 경험할 수 있는 위험을 증가시키므로 피해야 하며, 깜빡임을 줄이거나 제거하고 다른 시각적 효과로 대체해야 합니다.

WCAG 2.2 Guidelines : 2.3.1 Three Flashes or Below Threshold

잘못된 예시

애니메이션이 초당 10회 깜빡이도록 설정되어 있어 광과민성 장애가 있는 사용자에게 문제를 일으킬 수 있습니다.

올바른 예시

깜빡임 대신 배경색이 부드럽게 전환되도록 설정하여 안전하게 시각적 주의를 끌 수 있습니다.

검수 방법

모든 콘텐츠를 확인하여 초당 3~50회 주기로 깜빡이거나 번쩍이는 요소가 있는지 검사하였는가?
깜빡임이 있는 콘텐츠를 다른 시각적 효과로 대체하였는가?
Axe와 같은 접근성 검사 도구를 사용하여 깜빡임과 번쩍임 문제를 평가하였는가?
WAVE 도구를 사용하여 깜빡임 관련 접근성 문제를 검사하였는가?
브라우저의 개발자 도구를 사용하여 애니메이션 및 전환 효과를 검사하고, 깜빡임이 없는지 확인하였는가?
다양한 사용자가 웹 사이트를 탐색하며 깜빡임이나 번쩍임이 발생하지 않는지 피드백을 받았는가?

고정된 참조 위치 정보

요약 설명
전자출판문서 형식의 웹 페이지는 각페이지로 이동할 수 있는 기능이 있어야 하고, 서식이나 플랫폼에 상관없이 참조 위치 정보를 일관되게 제공ㆍ유지해야 합니다.
전자출판문서 형식의 웹 페이지는 각 페이지로 이동할 수 있는 기능을 제공해야 합니다. 또한, 서식이나 플랫폼에 상관없이 참조 위치 정보를 일관되게 제공·유지하여 사용자가 문서 내에서 일관된 경험을 할 수 있도록 해야 합니다.

WCAG 2.2 Guidelines : Navigable EPUB Accessibility Guidelines

잘못된 예시

페이지 이동 기능이 제공되지 않아 사용자가 문서 내에서 쉽게 탐색 불가능 합니다.

								<div id="content">
									<h1>Chapter 1</h1>
									<p>Content of chapter 1...</p>
									<h1>Chapter 2</h1>
									<p>Content of chapter 2...</p>
								</div>

올바른 예시 1

내비게이션 링크를 제공하여 사용자가 각 챕터로 쉽게 이동할 수 있습니다.

								<nav>
									<ul>
										<li><a href="#chapter1">Chapter 1</a></li>
										<li><a href="#chapter2">Chapter 2</a></li>
										<li><a href="#chapter3">Chapter 3</a></li>
									</ul>
								</nav>
								<div id="content">
									<h1 id="chapter1">Chapter 1</h1>
									<p>Content of chapter 1...</p>
									<h1 id="chapter2">Chapter 2</h1>
									<p>Content of chapter 2...</p>
									<h1 id="chapter3">Chapter 3</h1>
									<p>Content of chapter 3...</p>
								</div>

올바른 예시 2

id 속성을 사용하여 페이지를 구분하고, 내비게이션 링크를 통해 각 페이지로 이동할 수 있도록 하며, 각 페이지는 :target CSS 선택자를 사용하여 참조 위치가 일관되게 유지할 수 있습니다.
(왼쪽 에디터 영역의 full Screen 모드를 켜거나, 오른쪽 미니 브라우저를 전체화면(브라우저 전체화면 또는 모니터 전체화면) 모드로 변경한 후 페이지를 클릭하세요.) (본 예제는 desktop에서 확인 가능합니다.)

검수 방법

내비게이션 링크를 클릭하여 각 페이지로 이동할 수 있는지 확인하였는가?
모든 페이지가 일관된 참조 위치를 유지하고 있는지 확인하였는가?
Axe와 같은 접근성 검사 도구를 사용하여 내비게이션 기능의 접근성을 평가하였는가?
WAVE 도구를 사용하여 내비게이션과 참조 위치 정보와 관련된 접근성 문제를 검사하였는가?
NVDA, JAWS와 같은 스크린 리더를 사용하여 내비게이션 링크와 참조 위치가 올바르게 작동하는지 확인하였는가?
브라우저의 개발자 도구를 사용하여 HTML 구조와 CSS 스타일을 검사하고, 모든 기능이 올바르게 구현되었는가?
다양한 사용자가 웹 사이트를 탐색하며 내비게이션 기능과 참조 위치 정보 제공에 어려움이 없는지 피드백을 받았는가?

단일 포인터 입력 지원

요약 설명
다중 포인터 또는 경로기반 동작을 통한 입력은 단일 포인터 입력으로도 조작할 수 있어야 합니다.
웹 애플리케이션은 다중 포인터나 경로 기반 동작을 사용할 때, 단일 포인터 입력으로도 동일한 작업을 수행할 수 있도록 지원해야 합니다. 이는 사용자가 한 손가락만으로도 모든 기능을 이용할 수 있게 하여 접근성을 높이는 데 기여합니다.

WCAG 2.2 Guidelines : 2.5.1 Pointer Gestures

잘못된 예시

다중 포인터 입력(예: 두 손가락으로 줌)을 지원하지만, 단일 포인터 입력에 대한 대체 방법이 제공되지 않습니다.

								<div id="image"></div>

								<script>
									const image = document.getElementById('image');
									image.addEventListener('touchstart', function(event) {
										if (event.touches.length > 1) {
											// Handle multi-touch zoom or pan
										}
									});
								</script>

올바른 예시

단일 포인터 입력(예: 마우스를 통한 드래그)을 지원하여 모든 사용자가 이미지를 조작할 수 있도록 제공합니다.

								<div id="image"></div>

								<script>
									const image = document.getElementById('image');
									let isDragging = false;
									let startX, startY;

									// Multi-pointer input (e.g., zoom)
									image.addEventListener('touchstart', function(event) {
										if (event.touches.length > 1) {
											// Handle multi-touch zoom or pan
										}
									});

									// Single pointer input (e.g., drag)
									image.addEventListener('mousedown', function(event) {
										isDragging = true;
										startX = event.pageX - image.offsetLeft;
										startY = event.pageY - image.offsetTop;
									});

									document.addEventListener('mousemove', function(event) {
										if (isDragging) {
											image.style.left = `${event.pageX - startX}px`;
											image.style.top = `${event.pageY - startY}px`;
										}
									});

									document.addEventListener('mouseup', function() {
										isDragging = false;
									});
								</script>

검수 방법

터치스크린, 마우스, 스타일러스 등 다양한 입력 장치를 사용하여 웹 애플리케이션의 모든 기능이 단일 포인터 입력으로 작동하는지 확인하였는가?
다중 포인터 입력이 필요한 기능이 단일 포인터 입력으로도 수행될 수 있는지 테스트하였는가?
Axe와 같은 접근성 검사 도구를 사용하여 포인터 입력 지원의 접근성을 평가하였는가?
WAVE 도구를 사용하여 포인터 입력과 관련된 접근성 문제를 검사하였는가?
NVDA, JAWS와 같은 스크린 리더를 사용하여 단일 포인터 입력이 올바르게 작동하고 접근 가능한지 확인하였는가?
브라우저의 개발자 도구를 사용하여 입력 이벤트 리스너와 스크립트를 검사하고, 모든 기능이 단일 포인터 입력으로도 조작 가능하게 구현되었는가?
다양한 사용자가 웹 사이트를 탐색하며 단일 포인터 입력으로 모든 기능을 사용하는 데 어려움이 없는지 피드백을 받았는가?

포인터 입력 취소

요약 설명
단일 포인터 입력으로 실행되는 기능은 취소할 수 있어야 합니다.
단일 포인터 입력으로 실행되는 기능은 사용자가 쉽게 취소할 수 있어야 합니다. 이를 통해 사용자는 실수로 실행된 동작을 되돌릴 수 있으며, 웹 애플리케이션을 더 편리하게 사용할 수 있습니다.

WCAG 2.2 Guidelines : 2.5.2 Pointer Cancellation

잘못된 예시

사용자가 삭제 버튼을 클릭하면 즉시 동작이 실행되며, 이를 취소할 수 있는 방법이 제공되지 않습니다.
(삭제하기 버튼을 클릭해 보세요.)

올바른 예시

삭제 버튼을 클릭하면 확인 대화 상자가 나타나며, 사용자가 동작을 취소할 수 있는 옵션을 제공합니다.
(삭제하기 버튼을 클릭해 보세요.)

검수 방법

단일 포인터 입력(예: 마우스 클릭, 터치)을 통해 실행되는 모든 기능이 취소 가능한지 확인하였는가?
실행된 동작을 쉽게 취소할 수 있는지 테스트하였는가?
Axe와 같은 접근성 검사 도구를 사용하여 포인터 입력 취소 기능의 접근성을 평가하였는가?
WAVE 도구를 사용하여 포인터 입력과 관련된 접근성 문제를 검사하였는가?
NVDA, JAWS와 같은 스크린 리더를 사용하여 포인터 입력 취소 기능이 올바르게 작동하고 접근 가능한지 확인하였는가?
브라우저의 개발자 도구를 사용하여 이벤트 리스너와 스크립트를 검사하고, 모든 기능이 취소 가능하게 구현되었는가?
다양한 사용자가 웹 사이트를 탐색하며 포인터 입력 취소 기능을 사용하는 데 어려움이 없는지 피드백을 받았는가?

레이블과 네임

요약 설명
텍스트 또는 텍스트 이미지가 포함된 레이블이 있는 사용자 인터페이스 구성요소는 네임에 시각적으로 표시되는 해당 텍스트를 포함해야 합니다.
텍스트 또는 텍스트 이미지를 포함한 레이블이 있는 사용자 인터페이스 구성 요소는 네임에 시각적으로 표시되는 해당 텍스트를 포함해야 하며, 사용자 인터페이스의 일관성을 유지하고, 보조 기술이 정확하게 정보를 전달할 수 있도록 보장해야 합니다.

WCAG 2.2 Guidelines : 2.5.3 Label in Name

잘못된 예시

레이블과 네임이 일치하지 않는 경우 : 시각적으로 "Find:"가 표시되지만, 스크린 리더는 "Search"라는 네임을 읽게 되어 일관성이 없습니다.

								<label for="search">Find:</label>
								<input type="text" id="search" aria-label="Search">

올바른 예시

레이블과 네임이 일치하는 경우 : 시각적으로 표시되는 텍스트 "Search:"와 스크린 리더가 읽는 네임 "Search"가 일치하여 일관성이 유지됩니다.

								<label for="search">Search:</label>
								<input type="text" id="search" aria-label="Search">

검수 방법

UI 요소의 시각적 레이블과 네임이 일치하는지 확인하였는가?
HTML 소스 코드를 확인하여 aria-label 또는 aria-labelledby 속성이 올바르게 설정되었는지 확인하였는가?
Axe와 같은 접근성 검사 도구를 사용하여 레이블과 네임의 일치성을 평가하였는가?
WAVE 도구를 사용하여 레이블과 관련된 접근성 문제를 검사하였는가?
NVDA, JAWS와 같은 스크린 리더를 사용하여 레이블과 네임이 일치하는지 확인하였는가?
스크린 리더로 각 UI 요소를 탐색하며 시각적으로 표시된 텍스트와 네임이 일치하는지 확인하였는가?
브라우저의 개발자 도구를 사용하여 HTML 구조와 접근성 속성을 검사하고, 레이블과 네임이 일치하는지 확인하였는가?
다양한 사용자가 웹 사이트를 탐색하며 레이블과 네임의 일치성에 대한 피드백을 받았는가?

동작기반 작동

요약 설명
동작기반으로 작동하는 기능은 사용자 인터페이스 구성요소로 조작할 수 있고, 동작기반 기능을 비활성화할 수 있어야 합니다.
동작기반으로 작동하는 기능은 사용자 인터페이스 구성 요소로도 조작할 수 있어야 하며, 사용자가 이러한 기능을 비활성화할 수 있는 옵션을 제공해야 합니다. 이를 통해 다양한 사용자가 동일한 기능을 접근하고 사용할 수 있도록 보장합니다.

WCAG 2.2 Guidelines : 2.5.4 Motion Actuation

잘못된 예시

기기를 흔드는 동작으로만 기능이 작동하며, 다른 대체 방법이 제공되지 않습니다.

								<p>기기를 흔들어 동작을 실행해 보세요.</p>

								<script>
									window.addEventListener('devicemotion', function(event) {
										if (event.acceleration.x > 2) {
											alert('Motion detected!');
										}
									});
								</script>

올바른 예시

사용자가 기기를 흔드는 동작과 버튼 클릭을 통해 동일한 기능을 사용할 수 있으며, 동작기반 기능을 비활성화할 수 있는 옵션을 제공합니다.

								<p>기기를 흔들어 동작을 실행하거나 아래 버튼을 클릭하세요.</p>

								<!-- 버튼으로 동장 실행 -->
								<button onclick="alert('버튼이 클릭되었습니다!')">동작 실행</button>

								<!-- 모션 감지 기능 켜기/끄기 -->
								<button onclick="toggleMotion()">모션 감지 켜기/끄기</button>

								<!-- 모션 감지 기능 상태 표시 -->
								<p>모션 감지 상태: <span id="motionStatus">활성화됨</span>.</p>

								<script>
									let motionEnabled = true;

									function handleMotion(event) {
										if (motionEnabled && event.acceleration.x > 2) {
											alert('Motion detected!');
										}
									}

									window.addEventListener('devicemotion', handleMotion);

									function toggleMotion() {
										motionEnabled = !motionEnabled;
										document.getElementById('motionStatus').textContent = motionEnabled ? 'enabled' : 'disabled';
									}
								</script>

검수 방법

동작기반 기능이 사용자 인터페이스 구성 요소(예: 버튼 클릭)를 통해 조작될 수 있는지 확인하였는가?
동작기반 기능을 비활성화할 수 있는 옵션이 제공되는지 확인하였는가?
Axe와 같은 접근성 검사 도구를 사용하여 동작기반 기능의 접근성을 평가하였는가?
WAVE 도구를 사용하여 동작기반 기능과 관련된 접근성 문제를 검사하였는가?
NVDA, JAWS와 같은 스크린 리더를 사용하여 동작기반 기능이 올바르게 작동하고 접근 가능한지 확인하였는가?
스크린 리더를 사용하여 비활성화 옵션이 제대로 작동하는지 확인하였는가?
브라우저의 개발자 도구를 사용하여 이벤트 리스너와 스크립트를 검사하고, 동작기반 기능이 사용자 인터페이스 구성 요소로 조작될 수 있는지 확인하였는가?
다양한 사용자가 웹 사이트를 탐색하며 동작기반 기능과 비활성화 옵션을 사용하는 데 어려움이 없는지 피드백을 받았는가?

키보드 사용 보장

잘못된 예시

올바른 예시

검수 방법

초점 이동과 표시

잘못된 예시

올바른 예시

검수 방법

조작 가능

잘못된 예시 1

올바른 예시 1

잘못된 예시 2

올바른 예시 2

검수 방법

문자 단축키

잘못된 예시

올바른 예시

검수 방법

응답시간 조절

잘못된 예시

올바른 예시

검수 방법

정지 기능 제공

잘못된 예시

올바른 예시

검수 방법

깜빡임과 번쩍임 사용 제한

잘못된 예시

올바른 예시

검수 방법

고정된 참조 위치 정보

잘못된 예시

올바른 예시 1

올바른 예시 2

검수 방법

단일 포인터 입력 지원

잘못된 예시

올바른 예시

검수 방법

포인터 입력 취소

잘못된 예시

올바른 예시

검수 방법

레이블과 네임

잘못된 예시

올바른 예시

검수 방법

동작기반 작동

잘못된 예시

올바른 예시

검수 방법

웹 접근성 요약 보고서 예시