skip to Main Content

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. When alt text is embedded in an image on a web page, you can see the text when you hover your mouse over the image.

Mount RushmoreIf you hover your mouse over the image to the right, you will see the alternative text, “Mount Rushmore,” appear. 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.

Gray heron

Appropriate tag: This image’s alt text, “Grey heron,” is appropriate. It provides accurate information without being wordy or misleading.

Photo of a gray heron

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.

More Information

Back To Top