ARIA 접근성 가이드

역할 · 위젯

role="tab"

탭 목록(tablist) 안의 탭입니다. 선택하면 연결된 탭 패널(tabpanel)을 표시합니다.

중급

한눈에 보기

분류
위젯
대응 HTML
없음
이름 정하는 방법
콘텐츠, 작성자
이름 필수
아니요
필수 상위 요소
tablist
필수 하위 요소
없음

설명

tab은 tablist에 들어가는 탭 하나입니다. 탭과 패널은 다음처럼 서로 연결합니다.

  • 탭 → 패널: 탭에 aria-controls="패널 id".
  • 패널 → 탭: 패널에 aria-labelledby="탭 id"(패널 이름이 탭 이름이 됩니다).
  • 현재 탭: aria-selected="true", 나머지는 "false"(기본값이 false이지만 명시하는 것이 좋습니다).

탭 목록은 탭 순서에서 한 번만 멈추고(선택된 탭만 tabindex="0"), 탭 사이는 방향키로 이동합니다. 포커스를 옮기자마자 패널을 바꾸는 자동 활성화와, Enter/Space를 눌러야 바뀌는 수동 활성화 중 하나를 고릅니다. 패널 내용을 불러오는 데 시간이 걸리면 수동 활성화가 낫습니다.

탭 안의 콘텐츠는 이름으로만 쓰입니다

tab은 Children Presentational이 True입니다. 탭 안에 넣은 아이콘·배지 텍스트도 이름에 합쳐지므로, “새 글 3”처럼 읽히길 원하는지 확인하고 필요 없으면 aria-hidden으로 뺍니다. WAI-ARIA 1.2 표에서 탭의 이름은 필수가 아니지만, 화면낭독기 사용자에게는 이름 없는 탭이 쓸모없으므로 항상 이름을 갖게 합니다.

테스터 관점

  • 탭에 포커스했을 때 “탭, 선택됨, 1/3”처럼 역할·상태·위치가 읽히는지 확인합니다.
  • Tab이 탭 사이가 아니라 탭 목록 → 패널로 이동하는지 확인합니다.
  • 숨겨진 패널이 hidden 등으로 접근성 트리에서도 빠져 있는지 확인합니다.

함께 쓰는 속성

지원 속성

aria-disabledaria-expandedaria-haspopuparia-posinsetaria-selectedaria-setsize

전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.

키보드 동작

키보드 동작
키동작
Tab탭 목록으로 들어오면 선택된 탭으로 포커스가 갑니다. 탭 목록 안에서 누르면 선택된 탭 패널(또는 그 안의 첫 포커스 요소)로 이동합니다.
→다음 탭으로 이동합니다. 마지막 탭이면 첫 탭으로 순환합니다. 자동 활성화면 패널도 바뀝니다.
←이전 탭으로 이동합니다. 첫 탭이면 마지막 탭으로 순환합니다.
Home(선택 사항) 첫 탭으로 이동합니다.
End(선택 사항) 마지막 탭으로 이동합니다.
Space(수동 활성화) 포커스된 탭을 선택하고 패널을 표시합니다.
Enter(수동 활성화) Space와 같습니다.
Shift + F10(선택 사항) 탭에 연결된 팝업 메뉴가 있으면 엽니다.
Delete(선택 사항) 삭제할 수 있는 탭이면 탭을 지우고 포커스를 다음 탭으로 옮깁니다.

사용 예

기본 구조

HTML
<div role="tablist" aria-label="상품 정보">
  <button type="button" role="tab" id="t1" aria-selected="true" aria-controls="p1">상세 설명</button>
  <button type="button" role="tab" id="t2" aria-selected="false" aria-controls="p2" tabindex="-1">리뷰</button>
</div>
<div role="tabpanel" id="p1" aria-labelledby="t1" tabindex="0">...</div>
<div role="tabpanel" id="p2" aria-labelledby="t2" tabindex="0" hidden>...</div>

탭 바꾸기

JavaScript
function select(tab) {
  tabs.forEach(function (t) {
    var on = t === tab;
    t.setAttribute('aria-selected', String(on));
    t.tabIndex = on ? 0 : -1;
    document.getElementById(t.getAttribute('aria-controls')).hidden = !on;
  });
  tab.focus();
}

탭을 링크 목록으로 만드는 실수

비권장비권장
<ul role="tablist">
  <li role="tab"><a href="/notice">공지</a></li>   <!-- 페이지 이동은 탭이 아니라 내비게이션 -->
</ul>

탭을 누를 때 다른 페이지로 이동한다면 탭 패턴이 아니라 <nav> 안의 링크 목록과 aria-current="page"를 씁니다.

직접 해 보기

탭 목록에 포커스를 두고 ← → Home End로 이동해 보세요. 포커스가 옮겨지면 바로 해당 패널이 표시되는 자동 활성화 방식입니다. Tab을 누르면 탭 목록을 벗어나 패널로 이동합니다.

면 100% 소재의 기본 티셔츠입니다.

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
탭 목록으로 이동상품 정보, 탭 목록, 상세 설명, 탭, 선택됨, 1/3
→로 다음 탭배송 안내, 탭, 선택됨, 2/3
Tab으로 패널 이동배송 안내, 탭 패널, 주문 후 2~3일 안에 도착합니다.

사용 지침

이렇게 쓰세요

  • tablist 바로 안에 탭을 넣습니다(사이에 래퍼가 있으면 role="none").
  • 선택된 탭만 tabindex="0", 나머지는 -1로 둡니다.
  • 탭과 패널을 aria-controls/aria-labelledby로 서로 연결합니다.

이렇게 쓰지 마세요

  • 페이지 이동 메뉴에 탭 역할을 쓰지 않습니다.
  • 선택 상태를 클래스(.active)로만 표시하지 않습니다.
  • 모든 탭을 탭 순서에 넣어 Tab으로 탭 사이를 이동하게 만들지 않습니다.
tablisttabpanelbutton

이 역할을 쓰는 패턴

탭

참고 자료