Impact: Low
Effort: Medium
Images present problems for screen readers because they rely on text to produce an audio version of a web page or document. Alternative text, or alt text, is a type of metadata that enables authors to embed short textual descriptions in images that can be read by screen readers.
For most images you encounter on a web page, you will not be able to tell whether alt text has been appropriately added to it. However, someone using assistive technology would be able to identify the image if alt text has been added. As an example, if you mouse over the image to the right, you might be able to see the text “Mount Rushmore” over the image. While this is not alt text – it is technically the title of the image, which for demonstration purposes is the same as the alt text – a screen reader would let the visitor to the page that the image is of Mount Rushmore. When an image does not include alternative text, some screen readers will simply skip over the image while others will announce the image’s file name. To counteract these inconsistencies among screen readers, the best practice is to provide an alt tag with consistency. If the image is purely decorative, all screen readers will skip over it if you provide a null alt attribute (alt=””).
Rating
We rated the impact for this task as low because, at the time, we were only occasionally using images on our course web pages. If we were to assign a ranking today, we might give this task a higher impact rating.
We decided on a medium effort rating because of the difficulty entailed in creating a short textual description for an image that conveys complex meaning, such as a graph. In cases like that, the recommended strategy is to include surrounding text that adequately explains the information in the image.
Examples
The images below demonstrate three different approaches to alt text tagging. Again, noting that the text you are seeing (or not) when you mouse over the images, is showing the title of the image, not the alt text. For this demonstration we are showing the best practice of how to best describe the image.
Appropriate tag: This image’s alt text, “Grey heron,” is appropriate. It provides accurate information without being wordy or misleading.
Extraneous information: The alt text for this image reads “Photo of a grey heron.” There is no need to use phrases like “Photo of” or “Image of.”
No tag: No alt text has been provided for this image, rendering it inaccessible to a screen reader. If this is purely decorative, that is acceptable. Otherwise, adding alt text is necessary to make the image accessible.
More Information
- Review WebAIM’s article on Alternative Text for a comprehensive set of guidelines to using alt text on web pages.
- These alt text blunders from WebAIM provide examples of practices to avoid when creating alt text.
- Effective Practices for Description of Science Content within Digital Talking Books, published by the National Center for Accessible Media (NCAM), provides guidelines for writing alt text descriptions for complex images, such as graphs and charts.
- For a quick overview on how to create a text-based version of a complex image, like a line graph or timeline, download the NCAM brochure, Describing Science Images for Learners with Disabilities.
- The Image Description Guidelines, published by the DIAGRAM Center, contain detailed guidelines for describing, summarizing, and converting a variety of image types, in order to improve their accessibility.