6.1.1 키보드 사용 보장

요구 사항

웹 페이지가 제공하는 모든 기능은 키보드만으로 사용할 수 있어야 합니다. 이때 기능을 쓰는 데 필요한 키 조작 횟수가 많고 적음은 고려 대상이 아닙니다.

예외: 붓질 기능, 시뮬레이션, 지리정보 응용, 가상현실 콘텐츠처럼 위치 지정 도구의 커서 궤적이 중요한 콘텐츠와 움직임 측정 센서를 이용하는 콘텐츠. 다만 예외 콘텐츠라도 그 기능을 제외한 나머지 사용자 인터페이스는 키보드로 사용할 수 있어야 합니다.

왜 필요한가요

시각장애인은 마우스 포인터의 위치를 볼 수 없어 키보드로 웹을 사용하고, 손 떨림 등으로 마우스를 쓸 수 없는 사용자는 키보드나 키보드 신호를 내는 음성 입력·스위치 장치를 사용합니다.

도움받는 사용자

• 시각장애인(화면낭독기 사용자)
• 지체장애인(키보드·스위치·음성 입력 사용자)
• 마우스 사용이 어려운 고령자
• 키보드를 선호하는 숙련 사용자

적용 방법

네이티브 HTML 컨트롤(<a href>, <button>, <input>, <select>)은 키보드 동작이 기본으로 들어 있으므로 먼저 사용합니다. div나 span에 클릭 이벤트만 붙이면 키보드로 쓸 수 없습니다. 직접 만든 위젯은 tabindex, 키 이벤트, 역할을 모두 구현해야 합니다(키보드와 초점 가이드 참고).

<!-- 비권장: 키보드로 초점도 받지 못하고 Enter도 동작하지 않음 -->
<div class="btn" onclick="save()">저장</div>

<!-- 권장: button은 Tab 초점, Enter·Space 실행이 기본 -->
<button type="button" onclick="save()">저장</button>

// 마우스 전용 이벤트에는 키보드 대응을 함께 둡니다
menuBtn.addEventListener('mouseenter', openMenu);
menuBtn.addEventListener('focus', openMenu);      // 키보드 초점에도 동작
menuBtn.addEventListener('click', toggleMenu);    // click은 Enter·Space에도 발생(버튼)

사례

<button type="button" aria-expanded="false" aria-controls="faq1">자주 묻는 질문 1</button>
<div id="faq1" hidden>…</div>

<li onmouseover="showSub()">회사 소개
  <ul class="sub">…</ul>
</li>

자주 하는 실수

• div·span·img에 onclick만 연결해 키보드로 실행할 수 없습니다.
• 하위 메뉴가 마우스 오버로만 열리고 키보드 초점으로는 열리지 않습니다.
• 드래그 앤 드롭으로만 순서를 바꿀 수 있습니다.
• 사용자 정의 셀렉트·슬라이더가 방향키에 반응하지 않습니다.
• tabindex="-1"을 잘못 지정해 컨트롤에 초점이 가지 않습니다.

검사 방법

• 마우스를 쓰지 않고 Tab, Shift+Tab, Enter, Space, 방향키만으로 조작해 봅니다.
• 모든 링크, 버튼, 입력 서식, 메뉴, 탭, 슬라이더, 팝업 닫기 등 기능을 키보드로 실행할 수 있는지 하나씩 확인합니다.
• 마우스 오버·드래그로만 동작하는 기능이 있는지 확인하고, 있다면 키보드 대체 수단을 확인합니다.
• 인증 심사에서는 전문가 심사와 장애인 사용자 심사로 확인하므로, 자동 검사 도구 결과만으로 준수를 판단하지 않습니다.

관련 ARIA

다른 지침의 대응 항목