ARIA 접근성 가이드

역할 · 위젯

role="tabpanel"

탭(tab)을 선택했을 때 보이는 내용 영역입니다.

기초

한눈에 보기

분류
위젯
대응 HTML
없음
이름 정하는 방법
작성자
이름 필수
예
필수 상위 요소
없음
필수 하위 요소
없음

설명

tabpanel은 탭 하나에 대응하는 내용 영역입니다. 이름이 필수이며, 보통 aria-labelledby로 자기 탭을 가리켜 “탭 이름 = 패널 이름”이 되게 합니다. 역할 고유의 속성은 없고 전역 속성만 씁니다. WAI-ARIA 1.2에서는 분류상 위젯이지만, 실제로는 탭 패턴을 이루는 구획(section)입니다.

  • 숨김 — 선택되지 않은 패널은 hidden 속성이나 display:none으로 숨겨 접근성 트리에서도 뺍니다. 화면에서만 감추고(투명도, 화면 밖 위치) 트리에 남기면 화면낭독기가 모든 패널을 읽습니다.
  • 포커스 — APG는 패널 안에 포커스 가능한 요소가 없거나 첫 요소가 한참 아래에 있으면 패널에 tabindex="0"을 주어, 탭 목록에서 Tab 한 번으로 내용에 닿게 하라고 안내합니다. 패널 안 첫 요소가 바로 포커스를 받을 수 있다면 생략해도 됩니다.

여러 패널이 동시에 보이는 구조(아코디언)는 탭 패턴이 아닙니다. 아코디언은 제목 안의 button과 aria-expanded, 필요하면 region으로 만듭니다.

테스터 관점

  • 패널로 이동했을 때 어떤 탭의 내용인지(패널 이름) 읽히는지 확인합니다.
  • 숨은 패널의 내용이 가상 커서로 읽히지 않는지 확인합니다.

함께 쓰는 속성

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

키보드 동작

키보드 동작
키동작
Tab탭 목록에서 누르면 활성 패널(또는 패널 안 첫 포커스 요소)로 이동합니다. 패널 안에서는 일반 탭 순서를 따릅니다.

사용 예

탭과 연결된 패널

HTML
<button type="button" role="tab" id="tab-review" aria-selected="true" aria-controls="panel-review">리뷰</button>
<div role="tabpanel" id="panel-review" aria-labelledby="tab-review" tabindex="0">
  <p>리뷰 12개</p>
</div>

패널 숨기기

JavaScript
panels.forEach(function (p) { p.hidden = p.id !== activeId; });

숨긴 패널을 트리에 남기는 실수

비권장비권장
<div role="tabpanel" style="opacity:0; position:absolute">...</div>
<!-- 보이지 않지만 화면낭독기는 읽습니다. hidden을 씁니다 -->

직접 해 보기

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

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

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
탭 목록에서 Tab으로 패널 이동상세 설명, 탭 패널
가상 커서로 패널 안 읽기면 100% 소재의 기본 티셔츠입니다.

사용 지침

이렇게 쓰세요

  • aria-labelledby로 자기 탭을 가리켜 이름을 붙입니다.
  • 선택되지 않은 패널은 hidden으로 숨깁니다.
  • 필요하면 tabindex="0"으로 패널이 포커스를 받게 합니다.

이렇게 쓰지 마세요

  • 탭 없이 단독으로 쓰지 않습니다. 일반 구획은 region이나 <section>을 씁니다.
  • 패널 안에 다시 같은 탭 목록을 넣어 구조를 복잡하게 만들지 않습니다.
tabtablistregion

이 역할을 쓰는 패턴

탭아코디언

참고 자료