2.1.1 키보드

요구 사항

콘텐츠의 모든 기능을 키보드 인터페이스로 조작할 수 있어야 하며, 개별 키 입력에 특정한 타이밍을 요구하지 않아야 합니다(예: 0.5초 안에 두 번 누르기). 예외: 기능의 본질이 단순한 끝점이 아니라 사용자의 움직임 경로에 따라 달라지는 경우(손글씨 서명, 자유 곡선 그리기, 비행 시뮬레이터 조종 등). 예외에 해당하더라도 같은 결과를 내는 다른 방법이 있다면 키보드로 제공하는 것이 좋습니다.

“키보드 인터페이스”에는 실제 키보드뿐 아니라 키 입력을 흉내 내는 스위치, 음성 인식, 화면 키보드 등이 포함됩니다.

왜 필요한가요

시각장애인은 마우스 포인터의 위치를 볼 수 없어 키보드로 조작하고, 손 떨림이 있는 사용자는 마우스로 작은 대상을 정확히 누르기 어렵습니다. 스위치·음성 입력 같은 많은 보조기술도 결국 키보드 입력으로 동작합니다.

도움받는 사용자

• 시각장애인(화면낭독기 사용자)
• 키보드만 사용하는 사용자
• 운동장애가 있는 사용자(손 떨림, 근력 저하 등)
• 스위치·대체 입력 장치 사용자
• 음성 인식 사용자

적용 방법

• 버튼은 <button>, 링크는 <a href>, 입력은 폼 요소처럼 기본적으로 키보드가 지원되는 HTML 요소를 우선 사용합니다.
• <div>·<span>으로 컨트롤을 만들어야 한다면 tabindex="0", 알맞은 role, Enter·Space 등의 키 처리를 모두 구현합니다.
• 마우스 전용 이벤트(mouseover, dblclick, 드래그)로만 동작하는 기능에는 키보드 대안을 제공합니다.
• 사용자 정의 위젯은 키보드와 포커스 관리 가이드와 APG 패턴(예: 탭, 메뉴 버튼)의 키보드 동작을 따릅니다.

사례

<div class="btn" onclick="save()">저장</div>

<button type="button" onclick="save()">저장</button>

자주 하는 실수

• <div onclick>로 만든 버튼에 tabindex와 키 이벤트가 없습니다.
• 드롭다운 메뉴가 마우스를 올릴 때만 열리고 키보드로는 열 수 없습니다.
• <a>에 href 없이 클릭 이벤트만 연결합니다.
• 드래그로만 순서를 바꾸거나 값을 조절할 수 있습니다.

검사 방법

• 마우스를 치우고 Tab, Shift+Tab, Enter, Space, 방향키, Esc만으로 페이지의 모든 기능을 사용해 봅니다.
• 모든 링크, 버튼, 입력 필드, 사용자 정의 위젯에 포커스가 가는지, 실행되는지 확인합니다.
• 사용자 정의 위젯은 APG 패턴의 키보드 동작과 비교합니다.

관련 ARIA

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 2.1.1 (새 창)