About This Page
This page has been adapted from the images core concept page on the WSU digital accessibility website by Daniel Rieck (daniel.rieck@wsu.edu). Specifically, Daniel first included most of the narrative content from the original image page and then expanded it with additional examples to create more opportunities to demonstrate how to test a document for common accessibility errors that involve images. This page was used as part of a presentation on web accessibility testing for GAAD 2024.
Compared to the reference page that has no accessibility issues that affect images, nearly all of the images on this page have had their alt text completely removed. The images are not even marked as decorative. Consequently, WAVE reports a large number of errors, underscoring the importance of ensuring alt text is provided for images.
Importance of Images
Images can add visual interest to the content, help people orient themselves within the content, and provide complementary information to assist with understanding the content. However, images can create barriers when they are not accessible. Images that are not accessible may cause people to miss contextual information conveyed by images, and images with motion may adversely affect some viewers.
Alternative Text
To improve the accessibility of images, a textual substitute called alternative text (alt text) is provided to meaningfully convey image content or function. Alt text has several benefits, including:
- Assistive technology can read alternative text in place of images to help people with visual or cognitive impairments.
- Web browsers and other applications can present the alternative text when images do not load.
- Search engines use alternative text when indexing web pages.
Alternative text can be provided in two ways:
- By using application formatting tools (e.g., an alternative text field or HTML alt tag), or
- By placing visible text near the image (e.g., a caption).
Examples
App formatting tools were used to set alt text for the following image:
The next image has a caption, so the alt text can be set to an empty string:
Images With Text
Plain text should be used to convey information rather than images of text unless:
- the presentation of the text is essential to the information being conveyed, and
- the presentation cannot be reproduced with the technology being used (e.g., a logo or traffic sign).
If an image with text is necessary, all text that is part of the image must be duplicated as alt text by using application formatting tools or by placing visible text near the image on the page.
Example: Alternative text for the image above might be, “Sign with Washington State University logo that reads Reserved Parking Cougars Only.”
Decorative Images
Decorative images are those that do not convey important content, are used only for layout or aesthetic purposes, or do not have a function (e.g., are not links). Decorative images must be implemented in a way that can be ignored by assistive technology. This will improve the experience for people using assistive technology.
Example: A divider created using multiple dot images.
If each of the images included “dot” as alternative text, assistive technology would consider the images important and read, “Graphic dot. Graphic dot. Graphic dot. Graphic dot. Graphic dot.” This creates a poor experience.
Linked Images
Alternative text is required on linked images and must describe the link action, destination, or function instead of the image content.
If an image without alternative text is the only content in a link, assistive technology may read the image file name or the URL which does not help people understand the link action, destination, or function.
Alternative text on linked images can be provided using application formatting tools or as adjacent visible text within the link.
Example
Complex Images
Complex images are intended to convey a lot of information such as flyers, charts, graphs, diagrams, and maps. When an equivalent textual substitute cannot be provided as short alternative text, the textual substitute must be provided elsewhere. Options include:
- A detailed description and/or a data table adjacent to the image on the same page.
- A link to a separate page with detailed information about the image. The link can be adjacent to the image or the image itself can be linked.
When using these options, alternative text is still necessary on complex images. It should describe the image in general terms or, if the image is linked, the link destination.
Example of a Complex Image
Program Assessment Cycle
