ARIA 접근성 가이드

역할 · 문서 구조

role="caption"

표(table, grid, treegrid)나 figure의 보이는 제목·설명을 나타냅니다.

중급HTML 요소 우선

한눈에 보기

분류
문서 구조
대응 HTML
<caption>(표), <figcaption>(그림)
이름 정하는 방법
금지 (prohibited)
이름 필수
아니요
필수 상위 요소
figure grid table treegrid
필수 하위 요소
없음

설명

caption은 상위 표나 그림의 이름(필요하면 설명까지)이 되는 보이는 콘텐츠입니다. WAI-ARIA 1.2에서 추가되었습니다.

HTML과의 관계

HTML <caption>은 <table>의 이름을, <figcaption>은 <figure>의 이름을 브라우저가 자동으로 계산해 줍니다. 그래서 HTML 표와 그림에는 이 요소를 쓰면 충분합니다. role="caption"은 div 등으로 만든 ARIA 표·그리드에서만 필요합니다.

ARIA로 만들 때 규칙

  • caption은 표·그리드의 첫 번째 자식, figure의 첫 번째 또는 마지막 자식으로 둡니다.
  • ARIA 캡션은 이름을 자동으로 주지 않습니다. 상위 요소에 aria-labelledby로 캡션을 연결합니다. 캡션에 이름과 긴 설명이 함께 있으면 이름 부분은 aria-labelledby, 설명 부분은 aria-describedby로 나눠 연결할 수 있습니다.
  • caption 자신에게는 aria-label/aria-labelledby를 쓸 수 없습니다(이름 금지).

함께 쓰는 속성

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

사용 예

HTML 표의 caption (권장)

권장HTML
<table>
  <caption>2026년 월별 대출 권수</caption>
  …
</table>

ARIA 표의 caption

HTML
<div role="table" aria-labelledby="t-name" aria-describedby="t-desc">
  <div role="caption">
    <div id="t-name">대회 참가자</div>
    <div id="t-desc">지난 4주 동안 접수된 참가자 500명의 명단입니다.</div>
  </div>
  <div role="row">…</div>
</div>

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
표로 이동2026년 월별 대출 권수, 표, 13행 3열

사용 지침

이렇게 쓰세요

  • HTML 표에는 <caption>, 그림에는 <figcaption>을 씁니다.
  • ARIA 캡션은 상위 요소의 aria-labelledby로 연결합니다.

이렇게 쓰지 마세요

  • caption을 표·그림 밖에 두지 않습니다.
  • caption 요소 자체에 aria-label을 붙이지 않습니다.
tablefiguregridtreegrid

이 역할을 쓰는 패턴

정렬 가능한 표

참고 자료