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-label attribute that must have the same content as the <figcaption> tag.

Note

Ideally, the alternative text for the image (i.e. alt attribute for the <img /> tag) must contain a reference to the adjacent caption.

Example 1

Three lamas in the Bolivian desert.
Desert in Bolivia, photo by Audesou.
<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

Three lamas in the desert. [photo 1]
Photo 1: shot by Audesou in Bolivia.
<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>

Comments

Add a comment

All fields are mandatory.

Back to top