The <figcaption> Element
As defined in the HTML Living Standard, the <figcaption> element represents a caption or legend for the rest of the contents of the element's parent <figure> element, if any.
<figure>
<img src="image.jpg" alt="Description">
<figcaption>Figure 1: The caption text.</figcaption>
</figure>
View HTML Living Standard: The figcaption element
Structural Rules
- Strict Parentage: The
<figcaption>element must be a child of a<figure>element. - Placement: It can be the first child or the last child of the parent figure. Most authors prefer placing it at the bottom.
- One per Figure: Only one
<figcaption>is allowed per<figure>.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
Using <figcaption> programmatically links the text to the image (or code snippet) inside the figure. For screen reader users, this provides essential context. When the user navigates into the figure, the browser identifies it as a distinct container and uses the figcaption as its accessible name (unless overridden by aria-label).
Figcaption vs. Alt Text
It is a common mistake to assume that a <figcaption> replaces the need for alt text on an image.
alttext: Provides a literal description of what is visible in the image for users who cannot see it.<figcaption>: Provides additional information, attribution, or editorial context that is valuable to all users (sighted and non-sighted alike).
A11y Tip: Avoiding Redundancy
If the <figcaption> contains the exact same description as the alt text, screen readers may read the information twice. Ensure the alt text is a concise description of the image content, while the <figcaption> provides broader context or a label.