키보드 탐색과 포커스 관리
한국어 해설 KO
키보드만으로 모든 기능을 사용할 수 있도록 Tab 순서, 포커스 표시, 건너뛰기 링크, 포커스 트랩을 학습합니다.
학습 목표
tabindex 값(0, -1, 양수)의 차이와 사용 기준을 설명할 수 있다
포커스 표시의 WCAG 요구사항을 이해한다
건너뛰기 링크의 목적과 구현 방법을 설명할 수 있다
모달에서의 포커스 트랩 패턴을 이해한다
키보드 접근성은 마우스를 사용할 수 없는 사용자(지체 장애인, 화면낭독기 사용자, 임시 부상자 등)에게 필수적입니다. 모든 인터랙티브 기능은 키보드로 접근하고 조작할 수 있어야 합니다.
Tab 순서와 tabindex: Tab 키로 포커스 가능한 요소(링크, 버튼, 입력 필드)를 순서대로 이동합니다. tabindex="0"은 자연스러운 DOM 순서대로 포커스됩니다. tabindex="-1"은 탭 순서에서 제외되지만, JavaScript로 focus()를 호출하면 포커스 가능합니다(프로그래밍 포커스). tabindex="양수"는 탭 순서를 강제 조정하므로 사용을 피해야 합니다.
포커스 표시(Focus Indicator): 포커스된 요소는 시각적으로 명확하게 표시되어야 합니다(WCAG 2.4.7). CSS `outline: none`으로 포커스 표시를 완전히 제거하면 WCAG 위반입니다. `:focus-visible` 의사 클래스를 사용하면 키보드 사용 시에만 포커스 표시를 보여주고, 마우스 클릭 시에는 숨길 수 있어 시각 디자인과 접근성을 모두 만족합니다.
건너뛰기 링크(Skip Link): 페이지 첫 번째 요소로 '본문으로 바로가기' 링크를 제공합니다. 키보드 사용자가 매번 긴 내비게이션을 Tab으로 거치지 않고 바로 주요 콘텐츠로 이동할 수 있습니다. 일반적으로 평소에는 화면 밖에 숨겼다가 Tab을 누르면 화면에 나타납니다.
포커스 트랩(Focus Trap): 모달 다이얼로그가 열리면 포커스가 모달 내부에만 머물러야 합니다(모달 마지막 요소에서 Tab → 모달 첫 요소로). 모달이 닫히면 모달을 열었던 요소(예: 모달 열기 버튼)로 포커스를 되돌려야 합니다. SPA에서는 라우트 변경 시 포커스를 새 페이지의 주요 제목으로 이동해야 합니다.
Original Text EN
Learn how to ensure all functionality is keyboard accessible through tab order, focus indicators, skip links, and focus traps.
Learning Objectives
Explain the differences between tabindex values (0, -1, positive)
Understand WCAG requirements for focus indicators
Describe the purpose and implementation of skip links
Understand the focus trap pattern for modals
Keyboard accessibility is essential for users who cannot use a mouse — people with motor disabilities, screen reader users, or those with temporary injuries. All interactive functionality must be accessible and operable via keyboard.
Tab order and tabindex: Tab navigates through focusable elements (links, buttons, inputs) in DOM order. tabindex="0" makes an element focusable in natural DOM order. tabindex="-1" removes from tab order but allows programmatic focus via JavaScript's focus() method. Positive tabindex values force a specific tab order and should be avoided.
Focus Indicator: Focused elements must be visually distinguishable (WCAG 2.4.7). Removing focus indicators with `outline: none` violates WCAG. Use `:focus-visible` to show focus indicators only for keyboard users while hiding them for mouse users, satisfying both design and accessibility needs.
Skip Link: Provide a 'Skip to main content' link as the first element on the page. This allows keyboard users to bypass repeated navigation and jump directly to main content. Skip links are typically hidden off-screen and appear on Tab press.
Focus Trap: When a modal dialog opens, focus must be contained within it (Tab from last modal element wraps to first modal element). When the modal closes, focus must return to the element that triggered it (e.g., the button that opened the modal). In SPAs, focus should move to the new page's main heading on route changes.