Introduction to Images and Non-Text Content

Summary

The right image can reinforce content for most people. But images can present challenges for some. When images convey information:

• People who cannot see images need text alternatives to explain them. This can include adding alternative (alt) text, labels, or captions to an image.
• People who are color blind or have low vision need images with good contrast. This is especially true when images include text. They also benefit when content includes a second piece of information to explain any color that conveys meaning, such as adding labels to a chart.
• People who are neurodivergent benefit more from literal than abstract images.

Overview

Images can provide information, enhance content, and define a brand or style. They can help individuals who have difficulty understanding written words better understand the content. However, they can also be an obstacle for people who cannot see or understand images. You should use images to support content, not replace it.

When we refer to images, we are talking about non-text elements like icons, graphs, videos, and images. When you include meaningful images or other non-text elements in content, you must provide text alternatives for them. Text alternatives allow everyone to have the same understanding of an image as everyone else. For example, assistive technologies such as screen readers use text alternatives to describe images to people who cannot see them.

• The text alternative for images that convey content should concisely describe the image, considering its context.
• The text alternative for functional images (commonly part of interactive controls) should not describe the image but rather convey its functionality.

Different types of images require different accessibility techniques. For example, a complex chart needs a more in-depth text alternative than a simple icon. However, the guidance below applies to all images.

• Include text alternatives for all meaningful images.
  • Images usually use alternative or “alt” text to describe their meaning. For websites, add the alt text to an image’s code. For documents, add the alt text to the image’s properties.
  • Labels, captions, and body text can also serve as text alternatives when placed and associated with the non-text content appropriately.
• Provide good contrast for images that contain text and functional images that convey information or purpose.
  • This guidance doesn’t mean all images require good contrast. However, if an image conveys content—such as a social media icon or a graphical button with the word “submit”—the rules of good contrast apply.
• Don’t rely on color alone to convey information in images.
  • If images are informative, they must use additional indicators, such as labels and patterns, instead of relying only on color. These additional indicators help people who are color-blind understand color-based information.
  • Charts and graphs are good examples of this issue. Imagine a bar chart with 20 bars that relied on color alone to identify the data represented in each bar. This chart would be problematic for someone who is color-blind to understand.
  • Adding labels for data points and the axis, using different patterns, and providing a descriptive summary all contribute to understanding a chart’s information.
  • Including legends for charts and graphs can also aid understanding, but it’s best to combine legends with direct labels.
• Define a background color for images with text over them.
  • When images are disabled, users still need to read the text.
  • If white text is placed over an image, turning off the image can result in white text over a white page unless the image’s background color is defined.
• Use text instead of an image of text.
  • People with low or limited vision who use high levels of magnification or adjust text cannot always read images of text. Users cannot cleanly scale these images or change the appearance of text in them.
  • For this reason, using text instead of an image of text is always recommended unless the image is essential.

Who is Helped

• People who are blind cannot see images and must rely on alternative text to convey the content in an image. These individuals use screen readers to listen to the contents of the page. When the screen reader encounters an image, it interprets the code and reads the alternative text provided for it. If no alt text is available, the screen reader usually announces the filename instead.
• People who have trouble processing visual information can also have problems understanding images. They often use a screen reader or other text-to-speech software that relies on alternative text and will hear only a filename if an image does not have alternative text.
• Some people with low vision or cognitive disabilities turn off images to simplify screen content. These individuals rely on alternative text to tell them what is important about the image.
• An image may be more difficult for people with low vision to understand, especially an image with text. These individuals often need to change zoom settings, causing images to become blurred. They may also change font colors, size, or spacing to read the text. These adjustments do not work with images of text.