용어 사전 coding 용어 페이지

키보드 내비게이션

Tab, Shift+Tab, Enter 등으로 UI를 이동·조작하는 접근 방식

keyboard-navigation #accessibility#frontend#ui

English version

다른 이름

keyboard navigationkeyboard flow키보드 탐색

관련 개념

tabindex 포커스 트랩 접근성

핵심 아이디어

키보드 내비게이션은 마우스를 쓰지 않고 Tab, Shift+Tab, Enter, 화살표 키 등으로 화면 요소를 탐색하고 조작하는 흐름입니다. 접근성 점검에서 가장 기본적인 검증 대상이기도 합니다.

중요한 것은 단지 "포커스가 가는가"가 아니라, 그 순서가 자연스러운가입니다. 화면 구조와 포커스 흐름이 어긋나면 사용자는 현재 어디에 있는지 파악하기 어려워집니다.

이 블로그에서의 역할

Mathbong의 UI 글에서는 모달, 폼, 대시보드, 피드백 메시지를 점검할 때 키보드 내비게이션을 기준으로 구조를 다시 확인합니다. 포커스 트랩과 tabindex를 실제 사용성으로 연결하는 최종 관점입니다.

이 개념을 다루는 글

[JavaScript 시리즈 13편] UI 코드에서 접근성과 시맨틱 HTML 의식하기 스크린 리더와 키보드 사용자를 배려하는 시맨틱 마크업, aria 속성, 포커스 제어 기법을 배웁니다.[JavaScript Series 13] Build Accessible UIs with Semantic HTML and JavaScript Learn semantic markup, ARIA attributes, and focus control techniques that serve screen-reader and keyboard users.