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.
Discover Opquast training and certification
The objective of these rules and the Opquast community mission is ‘making the web better’ for your customers and for everyone! Opquast rules cover the key major areas of risk that can negatively affect website users such as privacy, ecodesign, accessibility and security.
Opquast training has already allowed over 19,000 web professionals to have their skills certified. Train your teams, contact us
We offer a 1 hour free discovery module.