To be accessible to screen readers, images need alternate text. Missing alternative text is one of the most common accessibility errors but is easy to fix.
Alternate text, or alt text, lets screen reader users access visual information by providing a text description of an image. When a screen reader encounters an image, if alternate text is provided, it will read aloud what is included in the alt attribute (alt =).
When alt text is missing, a screen reader will only announce it as only an “image”, or sometimes the image file name.
Alt text for this image: Ground level view of the front of McMillan Hall on the campus of Washington University
Common image types
- Informative images: An image that contains information that is helpful for the user in understanding the content of the page. These images should have alt text.
- Decorative images: An image doesn’t convey any information in supporting the content on the page. These images should be given a null alt attribute (alt = “”). Decorative images will be ignored by screen readers. Become familiar how to designate an image as decorative, in WordPress, as an example, leaving the alternate text field blank automatically sets an image to decorative.
- Complex images: Complex images include charts, graphs, and infographics. Because these graphics can contain a lot of information, it is usually not practical to use the alternate text field. Convey the information adjacent to the image or provide a link to a text equivalent.
- Linked images: When linking an image, the alternate text should describe the link destination rather than a description of the image.
How to tell if an image is decorative or informal
It depends on the context. For example, when including an image of McMillan Hall for the purpose of breaking up a large block of text or to make a page interesting visually, the image could be considered decorative and can be ignored by screen readers.
If adding the same photo to an article about the history of campus architecture, alternative text should provide context to the surrounding text such as ‘McMillan Hall was built by Cope & Stewardson in 1907 and was originally used as a dorm’
Writing alt text
When writing alternate, or alt, text, it should be informative, brief, and only include necessary information. Remember, the alt text is being read out loud by a screen-reader and a long, overly detailed description may not be helpful to the user.
- Describe the image using relevant information: When writing alternate text, use a description or explanation that conveys its meaning in relation to the surrounding context. Avoid adding extraneous details.
- Keep it brief: When possible, limit to 100-125 characters. Be descriptive, but concise.
- Use your keywords if possible: Alternate text provides an opportunity to include keywords in your description that can be indexed for search engines. However, only use the keyword if it is relevant.
- Avoid text in images: Text embedded in an image can’t be seen by screen readers.
- Don’t include ‘image of’ or ‘picture of’: Screen readers will announce after the alternate text that it is an image.
For more information on how to add alt text to images on WashU Web Theme sites, use our helpful Adding Images guide.
Reference: 1.1.1 Non-text Content