Images play an important role in conveying information on websites, however not all users can see them.
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)
In HTML, the
<alt> attribute allows you to provide a text substitute for images or non-text content, in case the image can't be viewed by the user.
For blind or vision impaired users who rely on screen readers to interpret information on a screen, alternative text (alt text) is what will be voiced by the screen reader when the image is the focus.
Pie charts for example, are used to give graphical representations of data. Alt text allows you to provide the text substitute of the information presented in a pie chart so that this information is available to screen reader users.
There are many ways in which images are used and their different purposes will determine how you write your alt text. WCAG 2.0 outlines best practice techniques for providing alt text for different types of images.
- Meaningful images serve a purpose and can be categorised as simple or complex, depending on whether they need a short or long alt text description, respectively.
- Decorative images are purely aesthetic and do not serve a purpose or function.
If the image is simple, use short alt text to provide a text substitute. If the image is complex and requires a long text substitute, use the
<longdesc> attribute or refer to the location of the alt text elsewhere on the site. If the image is purely decorative, leave the alt text blank.
Note: An image that is decorative still requires the
<alt> attribute, even if it has no function. This acknowledges that an image is present but has no function, and instructs the screen reader to skip over it.
Whatever the purpose of the image is, the overall aim of alt text is to convey meaning that is equivalent to the meaning provided by the image.