The <figure> element can be used to represent media content, like:
- videos
- images
- illustrations
- diagrams
- charts
- photos
- code listings
It can optionally include a caption, specified with the <figcaption> element.
The figure, caption, and contents are treated as one unit.
Each <figure> should ideally represent a self-contained unit.
It can group media items together.
Such is the case of a photo gallery or a set of illustrations that go together.
In that case, a single figcaption would suffice.
Figure and Accessibility
The importance and use of Figcaption
A figcaption is optional. That means a figure can be used without a figcaption. This does not cause an error.
However, a figcaption helps assistive technology to communicate the content of the figure, and also summarizes that content, improving the experience of the average user.
What a Figcaption is not
In the case where we use an image, or a series of images (gallery), within a figure, we should not omit the use of alternative text just because we use a figcaption.
This can cause issues, both practical and semantical.
First, figure’s content may not be accessible to the reader with visual impairments.
Screen readers cannot find images without alt text, or in some cases only announce the image’s filename.
Second, the figcaption and the alt attribute are semantically different.
They server a different purpose.
The purpose of alt text is to represent the image’s key information.
Figcaptions offer a place for a summary or/and a conclusion, linking the image to the main document or emphasizing important details.
In our previous example, the alt tags describe the image, “Common Kingfisher stood on the beach”.
On the other hand, the figcaption elaborates on why we see these images, “Some bird species regularly occurring in most of Greek areas”.
Figures and how accessible are in Screen Readers
To ensure that a figure element is accessible for visitors that use screen readers, it should state its role and its accessible name.
For the latter, we use the aria-label attribute.
In the figure element, if a figcaption exists, the content of this figcaption should be used as its name.
This is a to be used as a broad rule. Developers can delve in every screen reader to examin how each one works regarding the figure element.
Here’s a summary of how tested screen readers handle this information across various browsers.
Although my blog doesn’t support comments, feel free to reply via email or X.