기본 코드 예시
공통 베이스라인
탭 컨테이너에 tablist 역할
탭 목록을 감싸는 요소에 role="tablist"가 있어야 합니다.
각 탭에 tab 역할
각 탭 요소에 role="tab"이 있어야 합니다.
각 패널에 tabpanel 역할
각 콘텐츠 섹션에 role="tabpanel"과 고유 id가 있어야 합니다.
탭이 패널을 참조
각 탭에 aria-controls로 연결된 tabpanel의 id를 지정해야 합니다.
활성 탭에 aria-selected
활성 탭은 aria-selected="true", 나머지는 aria-selected="false"여야 합니다.
화살표 키로 탭 이동
좌우 화살표 키로 탭 간 이동, Tab 키로 활성 패널 진입이 가능해야 합니다.
패널이 탭으로 레이블됨
각 tabpanel이 aria-labelledby로 제어 탭의 id를 참조해야 합니다.
roving tabindex 사용
활성 탭만 tabindex="0", 나머지는 tabindex="-1"이어야 합니다.
Home/End로 첫/마지막 탭 이동
Home 키로 첫 탭, End 키로 마지막 탭으로 이동할 수 있어야 합니다.
ARIA 역할 생략 금지
CSS/JS만으로 탭을 구현하면 스크린리더가 패턴을 인식하지 못합니다.
비활성 패널 노출 금지
비활성 tabpanel은 hidden 속성이나 display:none으로 숨겨야 합니다.
디자인 시스템별 구현
추가 체크포인트
Tab의 id와 tabpanel의 aria-labelledby 연결
Tab에 id="tab-{n}", tabpanel에 aria-labelledby="tab-{n}"을 명시적으로 설정하세요. MUI 공식 a11yProps 헬퍼를 활용하면 편리합니다.
Tabs에 aria-label 제공
Tabs 컴포넌트에 aria-label로 탭 그룹의 목적을 설명해야 스크린리더가 탭목록의 맥락을 파악할 수 있습니다.
비활성 Tab에 disabled prop
disabled prop을 사용하면 aria-disabled가 자동 적용되며 탭이 포커스 순서에서 제외됩니다.
코드 샘플
구현 노트
- –MUI Tabs는 화살표 키 탐색, roving tabindex, aria-selected를 자동으로 처리합니다.
- –a11yProps 헬퍼로 Tab의 id와 aria-controls를 일관되게 설정하세요.
- –tabpanel에 aria-labelledby를 설정해 탭과 패널을 의미론적으로 연결하세요.
- –scrollButtons prop 사용 시 ScrollButton에 aria-label이 자동 적용됩니다.