Images on websites

For images to be accessible to people who are unable to see them, they must be described using text (if informative) or hidden from assistive technologies (if decorative).

Users who are unable to see images depend on alternative text, often abbreviated “alt text”. Alt text is a short description of the image, residing behind the scenes, where its purpose is to communicate the content of an image to people who can’t see it (for example, a person who is blind, using an audible screen reader or Braille device).Specific techniques are provided below for adding or editing alt text using HTML and using a rich content editor.

Techniques using HTML

Simple images

In HTML, add alt text to the <img> element using the alt attribute, as in the following example:

<img src="blossoms.png" alt="Cherry trees in bloom on the UW campus">

Complex images

There are a variety of techniques in HTML for associating long descriptions with complex images. For details, see the Complex Images  section of the W3C WAI Images Tutorial.

Decorative images

Use either of the following techniques for instructing screen readers to ignore a decorative image:

• Avoid using the HTML <img> element for decorative images; instead present the image as a background-image using cascading style sheets (CSS).
• If using the HTML <img> element, add an empty alt attribute (alt="").

Techniques using a rich content editor

Rich content editors such as those used for adding content to Canvas, WordPress, or Drupal, all include support for alt text on images. The following examples describe the process generically, with screen shots from Canvas. However, the same process applies with slight variations in other web content authoring environments.

Simple images

When adding an image to a web page or document, simply look for a field or tab labeled “Alt text” or equivalent, and enter a short description into the field. If you are not prompted for alt text when adding the image, right click on the image after it’s been added and select “Image Properties” or equivalent, then look around in the image properties dialog for an “Alt text” prompt.

Complex images

“Alt text” fields are not suitable for long description of complex images. Instead, detailed descriptions of these images should be provided elsewhere (e.g., on the same page or on a separate page). The alt text field can then be used to provide an image title or summary, with additional information about where to find a longer description (e.g., “Figure 1. Percentages of Images with Alt Text. See below for a long description.”)

Decorative images

Some rich content editors today include a checkbox to identify when an image is decorative (see below for an example).

If you are using an editor that does not include a Decorative Image checkbox, you will need to do one of the following:

• Leave the Alt Text field blank. Some rich content editors will automatically tag the image as decorative. Be sure to test the page using an accessibility checker to be sure it worked. If it doesn’t work, you’ll need to use one of the remaining techniques.
• Switch to code view in your editor to access the underlying HTML, and add an empty alt attribute (alt="") to the <img> element.
• Avoid using decorative images.