The <figure> Element
As defined in the HTML Living Standard, the <figure> element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document.
<figure>
<img src="chart.png" alt="A descriptive alt text">
<figcaption>Figure 1: Descriptive caption here.</figcaption>
</figure>
View HTML Living Standard: The figure element
When to use Figure
The <figure> element is appropriate for any content that is essential to the document but can be moved away from the main text flow without altering the document's meaning. Common examples include:
- Illustrations and photos
- Diagrams and charts
- Code snippets (using
<pre>and<code>inside) - Poems or blockquotes that require a specific title or attribution
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
By wrapping content in a <figure>, you create a semantic group. Screen readers identify this as a "figure" landmark. When a <figcaption> is provided inside, it automatically becomes the accessible label for the entire figure, ensuring that users of assistive technology understand exactly what the grouped items represent.
Nesting and Multiple Contents
A <figure> can contain multiple pieces of content (e.g., three images representing a single sequence) as long as they all fall under the single <figcaption>.
<figure>
<img src="step1.png" alt="Step 1 description">
<img src="step2.png" alt="Step 2 description">
<figcaption>The two-step process for generating an audit report.</figcaption>
</figure>
A11y Tip: Figure vs. Image
Don't wrap every image in a <figure>. If the image is purely decorative or part of the sentence flow, use a standard <img>. Only use <figure> when you need to provide a caption or when the content is "independently distributable."