ARIA 접근성 가이드

역할 · 문서 구조

role="figure"

이미지, 도표, 코드 예시처럼 본문에서 참조하는 독립된 그림 단위를 나타냅니다.

중급HTML 요소 우선

한눈에 보기

분류
문서 구조
대응 HTML
<figure>
이름 정하는 방법
작성자 (author)
이름 필수
아니요
필수 상위 요소
없음
필수 하위 요소
없음

설명

figure는 그래픽, 이미지, 코드 조각, 예시 텍스트 등을 담는 인지 가능한 구획입니다. 본문에서 “그림 3 참고”처럼 참조하고, 반드시 그 자리에 있지 않아도 되는 콘텐츠입니다.

HTML과의 관계

<figure>와 <figcaption>을 쓰면 figcaption이 figure의 이름이 됩니다. 캡션이 있어도 그림 안 <img>의 alt는 따로 필요합니다. 캡션은 그림 전체의 제목·설명이고, alt는 이미지 자체를 대신하는 텍스트이기 때문입니다(두 내용이 같아 중복될 때는 상황에 맞게 조정합니다).

ARIA로 만들 때

role="figure"에는 aria-label이나 aria-labelledby로 이름을 붙이고, 캡션 텍스트를 aria-describedby로 연결할 수도 있습니다.

함께 쓰는 속성

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

사용 예

이미지와 캡션

권장HTML
<figure>
  <img src="chart.png" alt="2026년 1월 1,200권에서 6월 2,100권으로 꾸준히 증가">
  <figcaption>그림 1. 상반기 월별 대출 권수</figcaption>
</figure>

ARIA figure

HTML
<div role="figure" aria-labelledby="fig2">
  <pre><code>…</code></pre>
  <p id="fig2">예시 2. 버튼 마크업</p>
</div>

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
그림으로 이동그림 1. 상반기 월별 대출 권수, 그림, 2026년 1월 1,200권에서…, 그래픽

사용 지침

이렇게 쓰세요

  • 캡션이 있는 그림은 <figure>와 <figcaption>으로 묶습니다.
  • 그림 안 이미지에도 적절한 alt를 줍니다.

이렇게 쓰지 마세요

  • figcaption이 있다고 alt를 생략하지 않습니다.
imgcaptionblockquote

참고 자료