Alt Text Should Describe the Purpose of the Image, Not Necessarily the Image Itself
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:
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:
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 attribute) 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.