키보드 함정 찾기

키보드 트랩은 초점이 들어간 뒤 키보드로 빠져나올 수 없는 모든 지점을 말합니다. 마우스를 사용하지 않는 사용자에게는 막다른 길입니다. 🪤

트랩에 갇힌 사용자는 빠져나오기 위해 페이지 전체를 새로 고쳐야 할 수도 있습니다. WCAG는 출구가 없는 트랩을 사소한 버그가 아니라 실패로 간주합니다.

트랩은 사용자 지정 날짜 선택기, 내장 편집기, 초점을 가져간 뒤 돌려주지 않는 서드파티 플러그인과 같은 복잡한 위젯에서 자주 발생합니다.

Tab을 가로채면서 빠져나갈 방법을 제공하지 않는 대화상자는 가장 흔한 트랩입니다. 실제 모달은 Escape로 닫을 수 있어야 합니다.

동영상이나 지도 같은 내장 콘텐츠는 iframe 안에 있습니다. 일부는 초점을 가져간 뒤 사용자가 출구 없이 내부를 계속 맴돌게 합니다.

Tab 키에서 preventDefault를 호출하는 스크립트는 브라우저의 정상적인 이동을 막을 수 있습니다. 그러면 갑자기 초점이 전혀 앞으로 이동하지 않습니다.

일부 트랩은 Tab으로 앞으로 이동하는 것은 허용하지만 Shift+Tab은 막습니다. 한 방향으로만 이동할 수 있어도 여전히 트랩이므로 양쪽 방향을 모두 검사하세요.

열린 모달 안에 초점을 유지하는 것은 의도적으로 올바르게 처리하는 방식입니다. 규칙은 Escape나 닫기 버튼 같은 명확한 출구가 항상 있어야 한다는 것입니다.

검사 방법은 단순하지만 효과적입니다. 키보드만 사용하여 전체 페이지를 Tab으로 이동하고, 빠져나오기 위해 마우스를 절대 사용하지 마세요.

한 컴포넌트 안에서 초점이 계속 순환하고 Tab을 눌러도 다음으로 이동하지 않는다면 트랩을 발견한 것입니다. 어디에서 갇혔는지 정확히 기록하세요.

해결 방법은 빠져나갈 길을 복구하는 것입니다. Tab이 계속 이동하게 하고 Escape를 지원하며, 닫을 때는 레이어를 연 트리거로 초점을 돌려보내세요.

트랩은 키보드로 빠져나갈 수 없는 상태로 초점을 붙잡으며, WCAG 준수에 실패하게 합니다. 양방향으로 모든 요소를 Tab 이동해 보고, 항상 빠져나갈 경로를 제공하세요. ✅