Goal
- Allow users in environments where images are not seen (text browsers, screen readers or browsers with the images disabled)
- Understand the meaning of the images that they cannot see.
- Enable bots to exploit the information carried by the images (to reference, index and perform machine translation on the image text alternatives).
- Enable the display of relevant text while images are loading.
- Improve the accessibility of content for people with disabilities.
- Improve the way content is taken into account by search engines and indexing tools.
Implementation
- Give each img element concerned an alt attribute reproducing the information
- Give each area element concerned an alt attribute reproducing the information
- Reproduce the information in the content of each object element concerned
- Reproduce the information in the content of each affected canvas
- element. Repeat the information in a textual label associated with each affected svg element through its aria-label attribute or the desc tag.
In the case of a complex image that cannot be summarized concisely in a textual alternative, the details of the information must be provided in addition to using an extended description:
- either via the longdesc attribute of the image indicating the URL of the description,
- or via a link adjacent to the image playing the same role,
- either in the content of the page, or close to the image. In the latter case, the alternative can show the presence of this description and refer to it.
Control
- Check that the alt attribute of each img element in question reproduces the information in the image.
- Check that the alt attribute of each area element in question reproduces the information in the image.
- Check that the content of each object element in question reproduces the information in the image.
- Check that the content of each canvas element in question reproduces the information of the image.
- Check that each svg element in question is associated with wording reproducing the information in the image through its aria-label attribute or the desc tag.
- If applicable, check that there is an extended description and that it is suitable.