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).
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.
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.
Images with Motion
Some people may experience adverse reactions to animated content (e.g., blinking/flashing, scrolling, animated backgrounds).
Provide a way to pause, stop, or hide any movement that starts automatically, lasts for more than five seconds, or flashes more than three times in any one-second period.
Common Errors
These common errors hinder the accessibility and usability of images:
- Images that are not decorative are missing alternative text.
- Alternative text does not meaningfully describe the image content or function.
- Images that contain text (e.g., images of event flyers) do not duplicate the text as alt text.
- Complex images are not described in detail.
- Images with motion cannot be paused, stopped, or hidden by the viewer.
Best Practices
Follow these best practices to improve the accessibility and usability of images in your digital content.
- Keep the alternative text short (less than 150 characters) and use proper punctuation.
- Adjust alternative text so it is meaningful within the context of the content the image is used with.
- Ensure page content makes sense when images are hidden and replaced by their alternative text.
- Duplicate all meaningful text that is part of an image as alternative text.
- Describe complex images in detail.
- Use visible text such as a caption for information meant for everyone, e.g., image copyright/attribution.
- Do not begin the alternative text with phrases such as “image of,” “photo of,” or “graphic of” as assistive technology automatically announces images.
- Provide a way to pause images with auto-playing motion.
Accessibility Checks
Use this checklist as a guide to ensure your images are in an accessible format.
- Image content or function is described with alternative text.
- Decorative images are implemented in a way that can be ignored by assistive technology.
- Complex images are described in detail.
- Text that is part of an image is duplicated as alternative text.
- Images with motion can be paused by the viewer.