Overview
Users who are unable to see images depend on alternative text, often abbreviated as “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). Alt text should be succinct, just enough text to communicate the idea without burdening the user with unnecessary detail. When screen readers encounter an image with alt text, they typically announce “Image” and then read the alt text.
Techniques for describing images vary, depending on the type and purpose of the image:
- Simple image: The image conveys simple information (e.g., a photograph, icon, or logo)
- Complex image: The image conveys complex information (e.g., a chart or graph)
- Decorative image: The image is purely decorative, not informative
Simple images
Simple images must be described with alternative text, or “alt text.” Alt text is a short 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. Most authoring tools provide a means of adding or editing an image’s alt text, usually in a dialog that appears when an image is added, or later within an image properties dialog.
Complex images
Complex images such as graphs, charts, or diagrams, may contain too much information to be effectively described using alt text. Instead, detailed descriptions of these images should be provided elsewhere (e.g., on the same page or on a separate page).
This might include text that describes the highlights of the image, or it might include structured data organized using headings, lists, and tables that users can explore. This might be helpful for all users, not just users who are unable to see the image. Keep this in mind as you decide where to place the image description.
See the Additional Resources section below for links to helpful resources on how to write effective descriptions for complex images.
Decorative images
Decorative images do not need to be announced by screen readers. See below for techniques for hiding them. If decorative images are not hidden from screen readers, they may be announced with the full path and file name of the image, depending on how the screen reader is configured. This can be a very noisy and cumbersome experience for users.
If images are purely decorative and contain no informative content, they do not require a description. However, they may still require specific markup so screen readers know to skip them.
Images of text
Whenever possible, use text, not images, to create text content. Images of text lose fidelity when enlarged, which can make the text difficult to read, especially for users with visual impairments. Also, many people need to customize the appearance of text in order to read it effectively, for example by changing the font size, foreground and background color, font family, line spacing or alignment. If text is presented in an image, users have no control over its appearance.
Techniques
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">
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 emptyaltattribute (alt="").
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
altattribute (alt="") to the<img>element. - Avoid using decorative images.
Document authoring tools such as Microsoft Word and Google Docs include an option to add Alt Text to images. This is typically accessed by right-clicking an image and selecting Alt Text from the pop-up menu. If no Alt Text option is available (as in some versions of Word), the pop-up menu typically includes a search field; typing “Alt” into the search field will typically surface the Alt text option. To add alt text, simply type a brief description in the space provided.
In the above image from Microsoft Word, note the “Mark as decorative” checkbox. If the image is purely decorative (i.e., not communicating any meaningful information), check this box and screen readers will ignore the image.
Alt text dialogs with title and description
Google Docs, older versions of Microsoft Word, and perhaps a few other document authoring tools, offer two fields for entering alt text, Title and Description. In these cases, the best practice is to enter alt text into the Description field and leave the Title field blank. The Description field is more widely supported by assistive technologies and is more likely to survive if the document is exported into other document formats.
Additional Resources
- Images Tutorial – from W3C, includes recommendations, with examples, for all types of images
- Effective Practices for Describing STEM Images – from The National Center for Accessible Media (NCAM), includes guidelines plus a variety of examples
- Describing Figures – a guide from the ACM Special Interest Group on Accessible Computing (SIGACCESS), include a variety of examples
- WebAIM Screen Reader User Survey Results – a good example of data presented in a variety of ways (graphs, tables, and text descriptions). This is an example of universal design, communicating ideas using multiple means since humans are highly diverse in how they process complex information.
WCAG 2.1 success criteria
The issues described on this page, and associated Techniques pages, map to the following success criteria in the W3C’s Web Content Accessibility Guidelines (WCAG) 2.1:
- 1.1.1 Non-text Content (Level A)
- 1.4.5 Images of Text (Level AA)