The <figure> Element
As defined in the HTML Living Standard, the <figure> element represents self-contained content, potentially with an optional caption (<figcaption>), which is frequently referenced as a single unit from another part of the document.
<figure>
<img src="image.jpg" alt="Description of image">
<figcaption>This is a caption for the image above.</figcaption>
</figure>
View HTML Living Standard: The figure element
Accessibility: Self-Contained Content
The <figure> element is a semantic way to group content that is related to the main flow but can be moved away from the main text without affecting the document's meaning.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
By using <figure>, you tell assistive technologies that the enclosed content (images, code blocks, quotes) is a distinct unit. When combined with <figcaption>, it provides a clear, programmatic link between the content and its description.
Usage and Versatility
- Beyond Images: While commonly used for images,
<figure>is equally appropriate for code snippets, mathematical formulas, charts, or pull-quotes. - Referencing: Because figures are self-contained, they are ideal for being referenced elsewhere in the text (e.g., "As seen in Figure 1...").
- Nesting: Figures can be nested, though this is rare.
A11y Tip: Avoiding Redundancy
If the <figcaption> contains the exact same text as the alt attribute of the image, screen reader users may hear the same description twice. In such cases, keep the alt text brief and let the <figcaption> provide the detailed explanation.