Tabs
콘텐츠 영역을 탭으로 구분하여 전환하는 패턴
관련 WCAG 기준 — 클릭하여 상세 보기
기본 코드 예시
공통 베이스라인
모든 디자인 시스템에 적용탭 컨테이너에 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으로 숨겨야 합니다.
추가 체크포인트
TabPanel과 Tabs 연결
MUI Tabs의 value와 TabPanel의 value를 일치시켜 활성 패널을 제어하세요.
aria-label 또는 aria-labelledby
MUI Tabs 컴포넌트에 aria-label 또는 aria-labelledby를 추가하세요.
코드 샘플
구현 노트
- –MUI Tabs는 화살표 키 탐색과 roving tabindex를 자동으로 처리합니다.
- –TabScrollButton이 표시될 경우 스크린리더 사용자에게 스크롤 방향을 안내하세요.