03 · Components · 표현
그림·캡션Figure
이미지·도표·코드 블록에 설명을 묶는 단위. 본문과 시각적으로 구분하면서, 보조 기술에는 "이 캡션이 저 그림의 설명"이라는 연결을 전달합니다.
StableWCAG AA
이미지 + 캡션
tsx
<figure className="space-y-3">
<div className="aspect-[16/9] overflow-hidden rounded-md">
<img src="..." alt="토큰 레이어 다이어그램" className="h-full w-full object-cover" />
</div>
<figcaption className="text-[12.5px] leading-[1.6] text-[color:var(--color-text-muted)]">
그림 1. 프리미티브 → 시맨틱 → 컴포넌트의 3단계 토큰 흐름.
</figcaption>
</figure>미리보기
Primitive → Semantic → Component
코드 블록 + 캡션
코드에도 figure를 쓸 수 있습니다. 파일 이름이나 상황 맥락을 caption에 넣으면 스크린리더 사용자가 코드 블록의 의미를 미리 알 수 있습니다.
tsx
<figure>
<figcaption className="mb-2 font-en text-[11.5px] uppercase tracking-[0.08em] text-[color:var(--color-text-subtle)]">
app/globals.css
</figcaption>
<pre className="border border-[color:var(--color-border)] bg-[color:var(--color-gray-50)] p-5">
<code>--color-brand: var(--color-navy-700);</code>
</pre>
</figure>미리보기
--color-brand: var(--color-navy-700);