Skip to main content
Accessible Technology

Making Images Accessible

Overview

Images are inherently inaccessible to people who are unable to see them. How to address this issue depends on the purpose and complexity of the image.

Techniques

For each image in your web page or digital document, determine which of the following categories best describes your image:

  1. The image conveys simple information (e.g, a photograph, icon, or logo)
  2. The image conveys complex information (e.g., a chart or graph)
  3. The image is purely decorative, not informative

See below for applicable techniques for each category.

1. Images that Convey Simple Information

Images that convey simple information must be described with alternative text, or “alt text”. Alt text is a short, sweet description of the content of the image, added in such a way that is typically invisible to people who can see the image but is exposed to people who are using assistive technologies such as screen readers or Braille displays. Browsers also display alt text visibly if an image fails to load.

The description should convey the content and functionality of the image as concisely as possible to provide access to the content of the image without burdening users with superfluous details.

Adding Alt Text in HTML

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">

Adding Alt Text in Word Processing Programs or Rich Text Editors

Word processing applications such as Microsoft Word and Google Docs; as well as online rich text editors such as those used for adding content to Canvas, WordPress, or Drupal; all include support for alt text on images. When adding an image to a web page or document, simply look for a tab or field 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.

screen shot of the Insert/Edit Image dialog in Canvas, which includes an Alt Text field

Adding alt text to an image in Canvas

2. Images that Convey Complex Information

Complex images, such as graphs, charts, or diagrams, may contain too much information to be effectively described using alt text. Instead, these images must be described with a long description. Long description is a more detailed description that provides equivalent access to the information the image. The question to ask is: Given the current context, what information is this image intended to communicate? That same information must be provided to people who are unable to see the image. A long description can include any structure necessary to communicate the content of the image, including headings, lists, and data tables. The National Center for Accessible Media (NCAM) has developed guidelines for describing complex images, plus a variety of examples. These are available in their Effective Practices for Description of Science Content within Digital Talking Books.

Adding Long Description in HTML

In HTML, long description can be added either on a separate web page or on the same page in a <div> with an id attribute. The latter can be hidden from sighted users, although you should consider whether it might be of value to some sighted users too, particularly individuals who have difficulty understand visually symbolic content such as charts and graphs. Once the long description is in place, add a longdesc attribute to the <img> element, pointing to the URL of the long description. In the following example, the long description is contained on a separate web page title figure1-longdesc.html:

<img src="figure1.png" alt="Figure 1. Percentages of images with alt text" longdesc="figure1-longdesc.html">

3. Images that are Purely Decorative

If an image is purely decorative, and does not covey meaning, there are several methods for telling screen readers to ignore the 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="").
  • If using the HTML <img> element, add the following attribute: role="presentation".

References