figure

When to use

Use <figure> and <figcaption>. The native element handles the role, the caption association, and the document-outline semantics.

role="figure" is appropriate only when you cannot use the native element. Pair it with an accessible name — either an aria-labelledby pointing at a caption element, or an aria-label carrying the caption text.

A figure announces “figure, [caption]” in screen readers, signalling that what follows is illustrative rather than running prose. Reach for it for code listings, schematics, charts, and inline images that warrant a caption — not for every decorative image.

Common failures

• <figure> with no <figcaption> and no aria-label. The figure has no accessible name and the role adds little value.
• role="figure" on a <div> that wraps an <img> whose alt already covers the description. Redundant; just use the <img>.
• Putting <figcaption> outside the <figure>. The caption must be a direct child for the native association to work.
• Multiple figures on a page with the same caption text. Add aria-labelledby pointing at a unique element so navigation by figure works.
• role="figure" on an <img> directly. Use it on the containing element, with the image inside.

Example

<!-- Preferred -->
<figure>
  <img src="/images/keyboard-trap.svg" alt="Focus indicator stuck on a modal overlay with no escape route">
  <figcaption>A keyboard trap inside a poorly built modal.</figcaption>
</figure>

<!-- When <figure> is impossible -->
<div role="figure" aria-labelledby="diag-1">
  <img src="…" alt="…">
  <p id="diag-1">Tab order through an inaccessible single-page app.</p>
</div>