WAI-ARIA 탭(Tabs) 컴포넌트의 tablist, tab, tabpanel과 방향키 내비게이션

웹사이트에서 여러 개의 연관된 콘텐츠 영역을 한 화면에 겹쳐두고 버튼을 눌러 전환하여 볼 수 있는 탭(Tabs) 인터페이스는 대시보드, 제품 상세 설명, 설정 페이지에서 가장 흔히 마주치는 컴포넌트입니다. 그러나 수많은 프론트엔드 프로젝트에서 탭을 구현할 때 가장 심각하게 범하는 접근성 실수는 '탭 메뉴 버튼들을 Tab 키로 이동하도록 내버려 두는 것'입니다. 일반적인 웹 사용자에게는 탭 버튼을 Tab 키로 이동하는 것이 자연스러워 보일지 모르지만, W3C WAI-ARIA 표준 명세에서 탭 메뉴는 브라우저의 기본 탭 내비게이션을 벗어나 운영체제 데스크톱 위젯처럼 '좌우 방향키(Arrow Left/Right)'로 항목을 탐색하도록 엄격히 규정되어 있습니다. 그렇지 않으면 탭 버튼이 10개 있는 페이지에서 탭 내부 콘텐츠로 이동하기 위해 사용자가 Tab 키를 10번이나 눌러야 하는 치명적인 키보드 트랩이 발생하기 때문입니다. 이 글에서는 WAI-ARIA APG 표준 탭 컴포넌트의 완벽한 키보드 인터랙션 아키텍처를 해부합니다.

왜 탭 버튼 간의 이동은 Tab 키가 아니라 '방향키'여야 하는가?

W3C WAI-ARIA APG(Authoring Practices Guide) 탭 패턴의 핵심 철학은 '단일 탭 정지 지점(Single Tab Stop)'입니다.

탭 메뉴가 5개(개요, 사양, 리뷰, 문의, 배송) 있을 때, 키보드 사용자가 Tab 키를 누르면 오직 '현재 활성화된 하나의 탭 버튼'에만 초점이 닿아야 합니다. 그리고 사용자가 탭 목록 내부의 다른 탭으로 전환하고 싶을 때는 키보드의 좌우 방향키(ArrowLeft, ArrowRight)를 눌러서 이동해야 합니다.

선택이 끝난 후 다시 Tab 키를 단 한 번 누르면, 탭 버튼들을 건너뛰고 해당 탭에 연결된 '탭 패널 본문(<div role='tabpanel'>)' 내부의 첫 번째 대화형 요소로 즉시 직행해야 합니다. 이 표준 규칙을 지켜야만 수많은 탭 버튼을 일일이 탭 키로 주파하지 않고도 본문 콘텐츠로 신속하게 이동할 수 있습니다.

WAI-ARIA Tabs 패턴의 3대 필수 시맨틱 뼈대

표준 탭 컴포넌트를 구성하기 위한 마크업 계층은 다음과 같이 3중 구조로 완벽히 결합되어야 합니다.

• 1. 탭 목록 컨테이너: <div role='tablist' aria-label='제품 상세 정보 탭'>. 탭 버튼들을 감싸는 부모 요소에 tablist 역할을 선언합니다.
• 2. 개별 탭 버튼: <button role='tab' id='tab-1' aria-selected='true' aria-controls='panel-1' tabindex='0'>. 활성 탭에는 aria-selected='true'와 tabindex='0'을, 비활성 탭들에는 aria-selected='false'와 tabindex='-1'을 부여하여 Tab 키 순회에서 제외시킵니다.
• 3. 콘텐츠 패널: <div role='tabpanel' id='panel-1' aria-labelledby='tab-1' tabindex='0'>. 탭과 패널의 ID를 서로 상호 참조(aria-controls와 aria-labelledby)하여 완벽히 연결합니다.

자동 활성화(Automatic Activation) vs 수동 활성화(Manual Activation)

방향키로 탭 버튼을 이동할 때 패널 내용이 언제 바뀌어야 하는지에 대한 실무 선택 기준입니다.

자동 활성화(Automatic)는 방향키를 눌러 탭 버튼에 포커스가 닿는 즉시 패널 내용이 자동으로 교체되는 방식입니다. 탭 전환 속도가 매우 빠르고 서버 비동기 로딩이 없는 정적 탭에 적합합니다.

반면 수동 활성화(Manual)는 방향키로 탭 버튼 포커스만 이동시키고, 사용자가 Enter 키나 Space 키를 눌렀을 때 비로소 패널 내용이 전환되는 방식입니다. 탭을 바꿀 때마다 서버에서 무거운 데이터를 불러와 화면을 새로 렌더링해야 하는 무거운 대시보드 환경에서는 수동 활성화 방식을 채택하는 것이 불필요한 네트워크 요청과 스크린리더 깜빡임을 방지하는 최상의 UX입니다.

Home, End 키 지원 및 포커스 순환(Wrap-around) 로직

완벽한 W3C APG 접근성을 완성하기 위해 키보드 onKeyDown 이벤트 핸들러에 Home 키와 End 키 지원을 필히 탑재해야 합니다.

Home 키를 누르면 첫 번째 탭으로, End 키를 누르면 마지막 탭으로 즉시 점프할 수 있어야 합니다. 또한 마지막 탭에서 오른쪽 화살표(ArrowRight)를 누르면 첫 번째 탭으로 자연스럽게 순환(Wrap-around)되도록 자바스크립트 인덱스 계산을 구성할 때 지체 장애인 사용자에게 최고의 키보드 내비게이션 경험을 선사할 수 있습니다.