Alt Text Should Describe the Purpose of the Image, Not Necessarily the Image Itself

Author:
Paul Bohman
Director of Training
Twitter: @paulbohman

Rather than describe every visual detail of an image, the most important thing is to describe the purpose of the image in the context of the web page.

Example 1:

submit

The purpose of this image is to allow you to submit the form.

If the image is a light blue button with rounded edges and dark red text with the word "Submit," the alt text should be simply:

alt="submit"

Don't worry about describing the non-essential visual aspects of the button's appearance.

Example 2:

Enjoy a 20% discount on a sun-filled, family-friendly vacation to the Bahamas

The purpose of this image is to convince you to buy a vacation to the Bahamas.

If the image is a promotional advertisement for vacation travel packages, with a picture of a mother, father, and three children running with their arms stretched out on a beach in the sun, with waves cresting in the background, and the words "20% off vacations to the Bahamas," you should definitely include the text that is in the image, but there is a bit of a judgment call as to whether to describe the image itself. One approach would be to include only the image's text:

alt="20% off vacations to the Bahamas"

Another approach would be to say a few marketing-oriented words plus the text, or a paraphrase of the text (as long as none of the original meaning is lost). For example:

alt="Enjoy a 20% discount on a sun-filled, family-friendly vacation to the Bahamas!"

Note that this alt text doesn't really describe the image, but it does give a general feel for why the image is there, and that's what's important. The first approach (including only the image's text in the alt atribute) is more succinct, saving the screen reader user some time, but it makes no attempt to replicate the visual experience of the image in the way the second approach does. Either approach can be acceptable, with advantages and disadvantages to each. But don't describe all the visual details of the image. They're not relevant in this context. Only the image's purpose is relevant.

Want to Learn More?

This tip was adapted from the Deque University class HTML & CSS Accessibility. See the full web accessibility curriculum for enrollment options.