When we include alternative text (or alt text) for images, we help provide an equivalent experience for those who can’t view the image itself.
When you add an image to a document, you can specify alternative text for the image or else mark the image as decorative. Screen readers and some text-to-speech tools will then announce this alternative text for users or else conveniently skip over the image if you marked it as decorative. Additionally, alternative text will be visually displayed on webpages and in emails in cases where the image fails to load.
Good alt text takes into consideration not just the image itself but the overall context. For example, let’s say you have a photo of a dog sleeping in front of the Santa Clara Mission Church. You might set the alternative text to: “A golden retriever sleeps in front of the Santa Clara Mission Church.” However, if that is actually your dog Rex and you are sharing the photo on your personal blog (where you talk about Rex all the time), then you might set the alternative text to: “Rex sleeps in front of the Santa Clara Mission Church.”
Here is a helpful structure for writing alt text: person + action + location. Our example above uses this structure: Rex + sleeps + in front of the Santa Clara Mission Church. There aren’t firm, universal rules regarding the length of alt text, but typically a sentence or two will be appropriate.
Don’t include “image of” within your alternative text since screen readers will already announce “image” or “graphic” alongside your alt text. Sometimes it can be helpful to specify the medium of the image, but only do this when it is particularly important. For example, if your alt text is “Rex sleeps in front of the Santa Clara Mission Church,” screen reader users will assume the image is a photo. However, if you are sharing a watercolor painting of the same scene, it may be helpful to set the alt text to “Watercolor painting of Rex sleeping in front of the Santa Clara Mission Church.”
For more detailed guidance, please check out How To Describe Images (Poet Image Description).
What To Do
Provide alternative text for meaningful images. Aim to write alt text that can serve an equivalent purpose to the image itself.
Ensure decorative images are marked as such so that they can be ignored by screen readers.
Human Impacts
Without alternative text, screen reader users may not be aware that images are present on the page, or they will not understand the purpose of the image. That is, screen reader users will miss out on important content and will have a poor experience navigating your document.
If decorative images are not properly marked as decorative, screen readers will attempt to announce these images, often in misleading or confusing ways. For example, screen readers might announce the image’s filename.
WCAG References
This skill corresponds to the following success criteria of the Web Content Accessibility Guidelines (WCAG):
- 1.1.1 Non-text Content (Level A)