Images

Give each image conveying information a relevant text alternative and a detailed description if necessary. Replace images containing text with styled text when possible.

There are two types of images:

  • Images with information (which need alternative text);
  • Decorative images (which must not have alternative text).

Sometimes, images convey non-text information. This information, which can help to understand the content to which it relates, must be accessible for all.

Providing an alternative is essential for users who do not perceive visual content. This is the case for blind or partially sighted people. A screen reader will be able to access this alternative and will return it to the user.

Similarly, for people who have difficulty understanding certain visual representations (iconography, paintings, multi-dimensional representations, graphics, etc.), an alternative can help to understand their meaning or extract important information.

For all these reasons, it is essential to translate the necessary and sufficient information conveyed by images into text.

Important

When these images constitute links, it is no longer the information they convey that is essential, but the function of the link they constitute. In this situation, they allow software controlled by voice by a person with a motor disability to locate the link to be activated more easily.

Synthesis

  • On image conveying information, define an alt on all images <img>, <svg>, <object>, etc;
  • Define an empty alternative on the decoration images;
  • Define a compliant and relevant alternative according to the type of image when it is an information carrier;
  • Define an alternative to image CAPTCHA;
  • Define detailed description if necessary;
  • Create a correct relationship between the caption and the image.