Skip to content
Accessible Technology

Images

Applies to

  • Websites
  • Documents
  • Online courses

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:

  1. Simple image: The image conveys simple information (e.g., a photograph, icon, or logo)
  2. Complex image: The image conveys complex information (e.g., a chart or graph)
  3. 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.

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 Describing STEM Images. Another excellent resource, with additional examples, is Describing Figures, a guide from the ACM Special Interest Group on Accessible Computing (SIGACCESS).

The WebAIM Screen Reader User Survey Results provides 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.

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, text downloads much faster than images. Instead of using images, try to attain all visual effects using cascading style sheets.

Techniques

Instructions for how to describe images within specific technologies are provided on the following pages:

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:

External Resources