Alt text should appear on some images
Accessibility
Alt text describes briefly the content of a photo or other image via a screen reader, where that image has a purpose that is informative.
Reason
- The purpose of alt text is to enable people with visual disabilities to discover what the content of a picture is.
- It provides context that other users receive from seeing the details of the picture.
- Bear in mind that being informative can convey mood or atmosphere as well as simply relating factual information about what is in an image
- Alt text should contain one hundred characters or fewer
- It is not necessary when the image is purely decorative
- It is always necessary when an image is being used as link, but in this situation it would describe the outcome of clicking on the image.
- Alt text can also help with cognitive load and/or processing for some users. Some users might be able to see the image but not quickly interpret what they are seeing. Properly descriptive alt text can help with this.
Best practice
When, for example, the image above is used on a page that is aiming to help recruit students it requires alt text. In this example, the alt text used reads:
Students from diverse racial groups and of different genders gather in the comfortable Library lounge at Carleton
One area of practice that can help with usability as well is considering this: If you are using the image on a page and you think that people using screen readers do not need to have this information read to them, then does the image have a purpose at all, even for those who aren’t using a screen reader?
Example of less accessible practices
One example of a way to not use is when identifying the people in an image.
This is not the correct alt text to use with this image: Pele (left) and Nelson Mandela (right)
In this situation is better to have alt text that reads: An elderly, grey-haired black man wearing a colourful tunic shakes hands with a slightly younger black man wearing a suit.
You can also add a caption to describe them in other ways: Ernest Hemingway, the great American writer, with revolutionary leader of Cuba, Fidel Castro.
Additional benefits
- Usability: i) If images don’t load for some reasons, users will gain insight from the alt text ii) what is not always clear in an image can be clarified by reading the alt text.
- SEO: Google uses alt text to help rank pages. Alt text is critical in how Google create results for image searches.
- Marketing: As alt text can convey something about the ambience of a place (for example, a campus) alt text can help sell the university. For instance, accurate alt text should mention that students in a photos are from a range of different racial groups when that is the case. Users with visual disabilities and from different racialized groups will thus learn that they are represented on campus, from accessing the alt text.
What WCAG says
Robotic scans cannot discern if an image in general use is purely decorative or if it is informative. Therefore there is no error listed in WAVE.
(Be sure to learn more about errors and alerts.)
From WCAG:
“In some situations a detailed literal description may be needed, but only when the content of the image is all or part of the conveyed information.”
You can consult WCAG’s decision tree to see all options around alt text.