키보드 사용 보장 검사 방법

어떤 기준에 해당하나요

한국 기준 (KWCAG 2.2)

6.1.1 키보드 사용 보장

운용의 용이성

국제 기준 (WCAG 2.2)

2.1.1 키보드 (A) ↗2.1.2 키보드 함정 방지 (A) ↗

어떻게 검사하나요

마우스 없이 Tab/Shift+Tab/Enter/Space/화살표 키만으로 모든 기능(메뉴, 슬라이더, 모달, 드래그 기능의 대체 수단 포함)을 사용할 수 있는지 확인하세요. 특정 요소에 초점이 갇혀 빠져나올 수 없는 경우(키보드 함정)가 없는지도 확인합니다.

자동 검사로 잡히는 부분

이 항목은 5개 규칙으로 자동 판정합니다. 각 규칙에 위반 시 개선 방법이 붙어 있습니다.

• 서버 사이드 이미지 맵을 사용하고 있습니다 server-side-image-map

  <img ismap> 서버 사이드 이미지 맵은 키보드로 사용할 수 없습니다. 클라이언트 사이드 이미지 맵(<map>+<area>)이나 일반 링크 목록으로 대체하세요.

• 스크롤 영역에 키보드로 접근할 수 없습니다 scrollable-region-focusable

  내부 스크롤이 있는 영역은 키보드 사용자가 스크롤할 수 있어야 합니다. 영역에 tabindex="0"과 적절한 role, 접근 가능한 이름을 부여하세요.

  <div class="code-block" tabindex="0" role="region" aria-label="코드 예시">…</div>

• tabindex=-1인 프레임 안에 초점 가능한 콘텐츠가 있습니다 frame-focusable-content

  tabindex="-1"이 지정된 <iframe> 내부의 링크·버튼에는 키보드로 도달할 수 없습니다. tabindex를 제거하세요.

• 인터랙티브 요소가 중첩되어 있습니다 nested-interactive

  버튼 안의 링크처럼 조작 요소가 중첩되면 스크린 리더와 키보드 동작이 예측 불가능해집니다. 하나의 요소로 합치거나 형제 요소로 분리하세요.

  <!-- 잘못된 예 -->
  <button><a href="/detail">자세히</a></button>
  <!-- 올바른 예 -->
  <a class="button-style" href="/detail">자세히</a>

• 클릭은 되지만 키보드로 조작할 수 없는 요소가 있습니다 a11ychk:keyboard-clickable

  onclick이 붙었지만 키보드 초점을 받지 못하는 <div>·<span> 등이 있습니다. 키보드 사용자가 실행할 수 없습니다. 가능하면 <button>을 쓰고, 불가피하면 tabindex="0"·role·키보드 이벤트를 함께 제공하세요.

  <!-- 잘못된 예 -->
  <div onclick="submit()">전송</div>
  <!-- 올바른 예 -->
  <button type="button" onclick="submit()">전송</button>

관련 검사항목

• 5.1.1 적절한 대체 텍스트 제공
• 8.2.1 웹 애플리케이션 접근성 준수
• 6.1.3 조작 가능
• 6.1.4 문자 단축키