키보드 접근성을 고려한 탭 UI 만들기

기본 탭 UI

• 탭 버튼 리스트
• 각각 연결된 패널
• 선택된 탭의 상태만 바꿔주면 끝

그런데 접근성 기준을 보면 얘기가 조금 달라진다.

탭은 실제로는 일종의 라디오 버튼 그룹과 비슷하게 행동해야 하고,

키보드로 다음/이전 탭을 이동할 수 있어야 한다.

그래서 이번에는 아래 조건을 만족하는 탭을 만드는 게 목표였다.

• Tab 키로 전체 탭 그룹에 진입
• ArrowRight / ArrowLeft 로 탭 이동
• Enter 또는 Space 로 선택
• 선택된 탭에 따라 패널 전환
• aria-* 속성으로 스크린리더 지원

생각보다 처리할 이벤트가 많아서 onKeyDown에서 케이스를 나누는 게 핵심 포인트였다.

특히 화살표 이동은 현재 포커스를 옮기기만 하고, 선택은 Enter/Space로만 하게 만들었다.

결과적으로 가장 중요한 건 포커스를 어떻게 관리하느냐였다.

방향키로 이동할 때는 단순하게 현재 인덱스를 기준으로 다음 버튼을 포커싱시키면 되는데,

이걸 자연스럽게 하려면 ref 배열을 관리하는 게 가장 안정적이었다.

예를 들면:

• 탭 목록 refs를 배열로 저장
• 방향키 입력 → 다음 인덱스 계산 → 그 ref로 .focus() 실행
• Enter 누르면 실제 선택 상태 업데이트

UI 컴포넌트에서 가장 재밌는 건, 기능은 눈에 잘 안 보이는데 접근성을 챙긴 컴포넌트는 사용자 경험이 확 달라진다는 점이다.