UKWRV.
BACK TO BLOG

키보드 내비게이션은 접근성 기능이 아니라 기본 사용성이다

마우스 없이도 주요 작업을 완료할 수 있는가 Tab 순서, Focus Visible, Escape, 복잡한 컴포넌트

키보드 내비게이션은 접근성 기능이 아니라 기본 사용성이다

먼저 던질 질문

마우스 없이도 주요 작업을 완료할 수 있는가

핵심 관점

키보드 내비게이션은 접근성 옵션이 아니라 인터페이스가 얼마나 예측 가능한지 보여주는 기본 품질이다.

다양한 환경에서도 통하는 장면

모달이 열리면 포커스가 내부로 이동하고 Escape로 닫힌다. 사용자는 현재 상태를 이해하고, 다음에 무엇을 할 수 있는지 알며, 행동의 결과를 어느 정도 예측할 수 있다.

탭 컴포넌트가 방향키와 Enter 동작을 지원한다.

배제나 혼란이 생기는 장면

포커스 스타일을 제거해 현재 위치를 알 수 없다.

커스텀 Dropdown이 마우스로만 열린다.

접근성 사례와 근거

키보드 이동은 빠른 사용자에게도 필요하다

키보드 내비게이션은 장애인을 위한 별도 기능이 아니라 복잡한 제품의 기본 조작 방식이다. 개발 도구, 관리자 화면, 데이터 테이블, 검색 중심 제품에서는 숙련 사용자가 키보드로 더 빠르게 작업한다.

Nielsen의 Flexibility and Efficiency of Use 휴리스틱은 초보자와 숙련자 모두를 지원하는 단축 경로의 중요성을 말한다. 키보드 흐름은 접근성과 생산성을 동시에 높인다.

실무 해석

WCAG는 키보드 접근, 포커스 순서, 포커스 가시성을 중요한 기준으로 다룬다. GOV.UK의 Skip link는 반복 내비게이션을 건너뛰고 본문으로 이동하게 하는 대표 사례다.

접근성 판단 기준

  • Tab 순서가 시각 순서와 맞는지 확인한다
  • 포커스가 항상 보이는지 본다
  • 컴포넌트별 기대 키 동작을 따른다

자주 빠지는 함정

포커스 스타일을 디자인상 거슬린다고 제거하면 사용자는 현재 위치를 잃는다. 포커스는 장식이 아니라 내비게이션 정보다.

추가로 비교할 접근성 사례

  • 명령 팔레트, 접근성 좋은 Modal, 커스텀 Dropdown 키보드 사례를 비교한다
  • 포커스 스타일을 없앤 UI 사례를 찾는다
  • Tab 순서가 시각 순서와 다른 사례를 모은다

포용성 설계 질문

  • 컴포넌트별 기대 키 동작을 충분히 다뤘는가
  • 테스트 방법까지 연결했는가

출처

  • W3C, Web Content Accessibility Guidelines WCAG 2.2: https://www.w3.org/TR/WCAG22/
  • GOV.UK Design System, Skip link: https://design-system.service.gov.uk/components/skip-link/
  • Nielsen Norman Group, 10 Usability Heuristics for User Interface Design: https://www.nngroup.com/articles/ten-usability-heuristics/
  • WAI-ARIA APG, Dialog Modal Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/