Picto thématique

Rule n° 113 - Each information-carrying image has an appropriate text alternative.

Some images provide real information. This is the case of the text set image but also images with visual information necessary or useful to understanding the content. In this case, make sure that the information is not lost when the image is disabled.

#Images and media #Editorial #SEO

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.

By Opquast - Read the license

Business application and benefits

The rules should be applied to your projects from the design phase through to post-implementation , and they should be understood by all professionals with web and customer experience (CX) responsibilities: from strategy to operations, marketers to project managers, and editorial to technical staff. The benefits of using this ruleset are numerous, including improving customer satisfaction, web performance, and e-commerce, and expanding your client base, while also decreasing your errors and costs.

Multidisciplinary verticles - accessiiblity, SEO, e-commerce, ecodesign etc..- starting from the foundational Opquast base.

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 11,000 web professionals to have their skills certified. Train your teams or your students, contact us