03 · Components · 표현
그림·캡션Figure
이미지·도표·코드 블록에 설명을 묶는 단위. 본문과 시각적으로 구분하면서, 보조 기술에는 "이 캡션이 저 그림의 설명"이라는 연결을 전달합니다.
StableWCAG AA
이미지 + 캡션
Primitive → Semantic → Component
코드 블록 + 캡션
코드에도 figure를 쓸 수 있습니다. 파일 이름이나 상황 맥락을 caption에 넣으면 스크린리더 사용자가 코드 블록의 의미를 미리 알 수 있습니다.
--color-brand: var(--color-navy-700);