WCAG 2.2 · 2. 운용의 용이성 · 2.1 키보드 접근성
2.1.2 키보드 함정 없음
No Keyboard Trap
키보드로 들어간 곳에서는 키보드로 빠져나올 수 있어야 합니다.
수준 AWCAG 2.0
한눈에 보기
- 성공 기준
- 2.1.2 키보드 함정 없음
- 수준
- 수준 A
- 원칙
- 2. 운용의 용이성
- 지침
- 2.1 키보드 접근성
- 도입
- WCAG 2.0
요구 사항
키보드로 어떤 구성 요소에 포커스를 옮길 수 있다면, 키보드만으로 그 구성 요소에서 포커스를 다른 곳으로 옮길 수 있어야 합니다. Tab·Shift+Tab·방향키 같은 일반적인 방법이 아닌 다른 키가 필요하다면 그 방법을 사용자에게 알려야 합니다. 이 기준은 “방해 금지” 조건으로, 페이지의 어느 한 곳이라도 키보드 함정이 있으면 페이지 전체가 적합하지 않습니다.
모달 대화상자 안에서 포커스를 순환시키는 것(포커스 가두기)은 Esc 키나 닫기 버튼으로 대화상자를 닫을 수 있으므로 키보드 함정이 아닙니다.
왜 필요한가요
키보드 사용자가 함정에 빠지면 페이지의 나머지 부분을 쓸 수 없고, 브라우저를 닫는 것 외에는 방법이 없습니다.
도움받는 사용자
- 키보드만 사용하는 사용자
- 시각장애인(화면낭독기 사용자)
- 스위치·대체 입력 장치 사용자
- 운동장애가 있는 사용자(손 떨림, 근력 저하 등)
적용 방법
- 삽입한 동영상 플레이어, 지도, 리치 텍스트 편집기, 외부 위젯에서 Tab·Shift+Tab으로 빠져나올 수 있는지 확인합니다.
- 편집기처럼 Tab 키를 입력에 쓰는 구성 요소는 빠져나오는 방법(예: Ctrl+M으로 Tab 동작 전환, Esc 후 Tab)을 안내합니다.
- 모달 대화상자는 Esc로 닫을 수 있게 하고, 닫으면 포커스를 원래 위치로 돌려놓습니다(대화상자 패턴).
자주 하는 실수
- 삽입한 플러그인·iframe 안에 들어가면 Tab으로 빠져나올 수 없습니다.
- 포커스를 가둔 레이어에 닫기 수단이 없습니다.
- 입력 필드에서 keydown 이벤트로 Tab을 막아 다음 요소로 갈 수 없습니다.
검사 방법
- Tab으로 페이지 처음부터 끝까지, Shift+Tab으로 거꾸로 이동하며 빠져나올 수 없는 곳이 있는지 확인합니다.
- 삽입 콘텐츠, 편집기, 대화상자에서 특히 확인합니다.