4.6 Images
Graphic elements such as images, charts, icons and infographics on websites and digital documents can serve different purposes, for example providing and communicating information or messages, adding visual appeal or increasing interactivity. Important information conveyed via images is often missed by blind and visually impaired persons, however. It is therefore important to provide such users with alternative ways of accessing relevant information conveyed in images.
Before making an image accessible, it is important to determine whether the image is purely decorative or whether it conveys information and, in the latter case, what is the degree of complexity of the information conveyed.
For images conveying simple information, a short description concisely conveying its content and functionality, known as alternative text, can be used. Alterative text can be added by adding the following “alt” attribute to the <img> element in the HTML code, which can be read by assistive technologies such as screen readers or Braille displays:
<img src=”image.png” alt=”Description of the image”>
Most Rich Text web content or document authoring applications include the possibility of adding alternative text to images.
Complex images (such as infographics, illustrations, charts, diagrams and graphs) that contain too much information to be described using alternative text must be described using a “long description”, which is a more detailed description that provides an equivalent text version of the information contained in the image.
On a website, long descriptions can be added to images either via a separate web page or on the same page using a <div> element with an “id” attribute. Once the long description is in place, a “longdesc” attribute pointing to the URL of the long description must be added to the <img> element. The following is an example of an attribute for a long description provided on a separate web page titled “image1-longdesc.html”:
<img src=“image1.png“ alt=“Image 1. Example of image” longdesc=”image1-longdesc.html”>
It is recommendable to consult expert guidance on how to describe complex images of a variety of subject matters and degrees of complexity, and to study examples of how to implement them.16
For purely decorative images conveying no meaning, screen readers can be instructed to ignore the image either by using Cascading Style Sheets to present the image as a background image (rather than using the HTML <img> element) or by using the HTML <img> element and adding the role=“presentation” attribute.17