The <figcaption> Element
As defined in the HTML Living Standard, the <figcaption> element represents a caption or legend for its parent <figure> element.
<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 figcaption element
Accessibility: Context and Association
The <figcaption> provides a programmatic association between the caption text and the content of the <figure>.
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 <figcaption>, you ensure that screen reader users understand that the text is a label for the figure, rather than just a random paragraph following an image. This is critical for complex diagrams or charts where the caption provides essential context.
Usage and Placement
- Positioning: The
<figcaption>can be placed as the first child or the last child of the<figure>element. - Singularity: A
<figure>can contain only one<figcaption>. - Content: It can contain any flow content, including links, strong text, or other formatting elements.
A11y Tip: Figcaption vs. Alt Text
A <figcaption> is NOT a replacement for the alt attribute. The alt text describes the image for those who cannot see it; the <figcaption> provides a visible label or explanation for everyone. Use both for maximum accessibility.