6.4. Tag images that have captions with <figure role="figure"> and <figcaption>
Images that have captions must be tagged with <figure role="figure"> and <figcaption>.
The <figure role="figure"> tag must:
- Include the image and the legend, and the legend must be tagged with
<figcaption>. - Have an
aria-labelattribute that must have the same content as the<figcaption>tag.
Notes
- Ideally, the alternative text for the image (i.e.
altattribute for the<img />tag) must contain a reference to the adjacent caption. - If the image with a caption does not provide any information (such as a product cover), you can simply describe the nature of the image in the alternative text, for example, “Illustrative photo”.
Example 1
<figure role="figure" aria-label="Desert in Bolivia, photo by Audesou.">
<img src="…" alt="Three lamas in the Bolivian desert." />
<figcaption>
Desert in Bolivia, photo by Audesou.
</figcaption>
</figure>
Example 2
<figure role="figure" aria-label="Photo 1 : shot by Audesou in Bolivia.">
<img src="…" alt="Three lamas in the desert. [photo 1]" />
<figcaption>
Photo 1: shot by Audesou in Bolivia.
</figcaption>
</figure>