키보드 사용 보장

무엇을 요구하나요?

마우스로 할 수 있는 모든 기능을 키보드만으로도 할 수 있어야 합니다. 마우스를 쓰기 어려운 사용자, 화면 낭독기 사용자, 스위치 같은 보조기기 사용자는 키보드(또는 키보드처럼 동작하는 장치)로 웹을 씁니다.

기본 조작은 다음과 같습니다.

키	동작
Tab / Shift+Tab	다음 / 이전 요소로 이동
Enter	링크 이동, 버튼 실행
Space	버튼 실행, 체크박스 선택
방향키	라디오 버튼, 탭 메뉴, 선택 상자 안에서 이동
Esc	모달·메뉴 닫기

또한 어떤 영역에 들어가도 키보드로 다시 빠져나올 수 있어야 합니다(키보드 함정 금지).

자주 틀리는 예

1. 클릭되는 div·span

div에 onclick만 붙이면 Tab으로 갈 수 없고 Enter로도 실행되지 않습니다.

<div class="btn" onclick="addCart()">장바구니 담기</div>

<button type="button" class="btn" onclick="addCart()">장바구니 담기</button>

링크처럼 다른 페이지로 이동하면 <a href>를, 동작을 실행하면 <button>을 씁니다. 어쩔 수 없이 div를 써야 한다면 역할·초점·키 처리를 모두 직접 넣어야 합니다.

<div role="button" tabindex="0" onclick="addCart()" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();addCart();}">장바구니 담기</div>

2. 마우스를 올려야만 열리는 메뉴

:hover로만 펼쳐지는 메뉴는 키보드로 하위 메뉴에 갈 수 없습니다. 초점을 받았을 때도 펼쳐지게 하세요.

.gnb li:hover > ul { display: block; }

.gnb li:hover > ul,
.gnb li:focus-within > ul { display: block; }

3. 빠져나올 수 없는 모달

모달 안에서 초점을 가두는 것은 맞지만, Esc나 닫기 버튼으로 반드시 나갈 수 있어야 합니다. 닫으면 모달을 연 버튼으로 초점을 돌려주세요.

확인하는 방법

1. 마우스를 치우고 Tab, Shift+Tab, Enter, Space, 방향키, Esc만으로 페이지의 모든 기능을 써 보세요. 가장 확실한 방법입니다.
2. 탭 포커스 점검과 북마클릿은 클릭은 되지만 Tab으로 갈 수 없어 보이는 요소를 찾아줍니다. JavaScript로 나중에 붙인 클릭 이벤트는 찾지 못할 수 있습니다.
3. 동영상 플레이어, 지도, 슬라이더, 서식 편집기처럼 복잡한 부품은 들어갔다가 빠져나올 수 있는지 꼭 확인하세요.