ARIA 접근성 가이드

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으로 거꾸로 이동하며 빠져나올 수 없는 곳이 있는지 확인합니다.
  • 삽입 콘텐츠, 편집기, 대화상자에서 특히 확인합니다.

다른 지침의 대응 항목

참고 자료