Image caption

Impact: High to major

Users mainly impacted: Blind.

RGAA criteria: Criterion 1.9

Explanation

HTML5 introduces the figure and figcaption tags that associate a caption with an image.

It is important to do this when the caption contains information about the image, such as copyright, that a blind user might misinterpret by thinking that the caption information is about the associated text.

The use of figure and figcaption requires certain adaptations to fill the possible lack of support by assistive technologies.

  • The <figure> tag has a role="figure" or role="group" attribute;
  • The <figure> tag has a aria-label attribute with the same content of the caption;
  • The caption is included in a <figcaption> tag.
<figure role="group" aria-label="copyright 2016 author name">
    <img alt="alternative of the image - See caption below" src="img.png"/>
    <figcaption>
        copyright 2016 author name
    </figcaption>
</figure>
Important

Not mandatory but highly recommended, the “See caption below” text in the image alternative creates a semantic relationship between the image and its caption, in case the element figure is not returned by the screen readers. The text “See caption below” is used in the caption to establish the semantic relationship.

Difference between the alternative of an image and the caption

  • The image alternative makes it possible to describe what the image conveys that is not in the context;
  • The caption of an image conveys additional information that the image does not convey.