Understanding Image Accessibility
Summary
Section titled “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
Section titled “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.
- 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.
- Don’t rely on color alone to convey information in images.
- Define a background color for images with text over them.
- Use text instead of an image of text.
Who is Helped
Section titled “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.
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.
Some people with low vision or cognitive disabilities turn off images to simplify screen content. These individuals rely on alternative text.
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.
Images that Convey Content
Section titled “Images that Convey Content”Images that convey content are also known as informative images. These are images that provide meaningful information.
A text alternative must describe any meaningful image that conveys information or provides a function.
Informative images include graphics, photographs, charts, or other visual elements that convey content.
Functional images include icons or other graphics used as buttons or links.
Alt text provides assistive technologies with a programmatic association between the image and its alternative text.
Alt text should:
- Tell people why the image is there based on its context
- Be concise and describe essential information
- Provide an equitable experience
Functional Images
Section titled “Functional Images”Functional images require text alternatives that describe their purpose.
For example, a house icon should use “home page” instead of “house”.
Ways to provide text alternatives:
- Visible text (preferred)
- Alt text
- Visually hidden text
- ARIA attributes
Decorative Images
Section titled “Decorative Images”Decorative images do not convey meaning or information.
These include:
- Redundant images
- Images fully described in nearby text
- Images used for ambiance
Decorative images should be ignored by assistive technologies.
Images of Text
Section titled “Images of Text”Use actual text instead of images of text whenever possible.
Images of text:
- Do not scale well
- Cannot be customized
- Are harder to read
Exceptions include logos and essential images.
Background Images
Section titled “Background Images”Background images are usually decorative.
They cannot have direct text alternatives.
If they convey meaning:
- Provide visible or hidden text alternatives
- Ensure good contrast
- Avoid using them for critical content
Icons must have text alternatives when they convey meaning.
Best option:
- Visible labels
Other options:
- Alt text
- ARIA attributes
Icons are decorative when they do not convey meaning or are described by nearby text.