[Note: updated April 2014]
To help you write better text alternatives for images, we’ve produced this decision tree. It asks three main questions to guide you to the right type of text alternative to provide.
1. What role does the image play?
If the image plays a purely decorative role on the page, use a blank text alternative: (alt=””).
It’s sometimes debatable whether an image is purely decorative. If you’re the one using it on a page, you’ll know what your intention was. If you’re really unsure, include a short text alternative.
If you use decorative images regularly, ask your web designer or developer to create a style you can use and then include the image via CSS (a style sheet).
NOTE: For Word documents only (not web pages or PDF documents), you need to use a short text alternative for decorative images—something as simple as ‘decorative’ will do. Screen readers announce the image dimensions, so a screen reader user will know there’s an image there. Labelling it decorative lets them know they’re not missing out on any content.
If the image is designed to provide a specific sensory experience (such as a work of art), you should provide a ‘descriptive identification’ as the text alternative. You should include the title of the work, the artist’s name, the year it was produced and the medium.
Sighted readers will probably be interested in this information too, so you may want to use it as a caption, rather than the ALT text. If you do this, you’ll still need a short label as the ALT text. Don’t leave it blank or a screen reader user may be confused by hearing the description and not knowing what it relates to. You could use just the title (alt=”Title of work”). Or you could try (alt=”Photo of”), then no information is repeated.
If the image is informative, consider the second question.
2. Does the image present new information?
No, it repeats information
If the image merely repeats information use a blank text alternative: (alt=””). Otherwise a screen reader user has to listen to it twice.
No, it’s a duplicated link
If the image is a link and duplicates a nearby text link, wrap the link around the image and the text to create a single link. Then use a blank text alternative for the image: (<a href=”page.html”><img alt=””>My page</a>). If you’re unsure of how to do this, talk to your web team.
If the image presents new information, consider the third question.
3. What type of information is communicated in the image?
If the image is a link, write something that identifies the content or function of the link just as you would when adding a text link: (alt=”label for link”).
Short, simple information
If the information in the image can be communicated with a short text alternative, then use that as your alt text: (alt=”short text alternative”).
If you’re using a caption for the image, don’t repeat the caption as the ALT text. Instead, use a short label. Then a screen reader user will know the caption relates to the image, but they won’t have to listen to the caption twice.
Longer or more complex information
If the content is much longer or complex, or the text alternative requires some structure, then you need to provide a long text alternative. This can be provided on:
- the same page as the image (as I’ve done here for the decision tree image)
- a new page linked from the
- page where you’ve used the image (for instance, I could have added a link below the decision tree graphic that said “text version of the decision tree”)
- image, using a LONGDESC attribute: (longdesc=”decision-tree-text.html”).
In each of these cases, you’ll still need a short label for the ALT text, to let users know there’s an image on the page. It’s a good idea to include information about where the long text alternative is (alt=”decision tree – full text version below”, as I’ve used on this page).
NOTE: Web browsers don’t alert users to LONGDESC links, so only screen reader users will know there’s a text version of an image if you use this technique. We recommend using a visible link instead.
- Writing text alternatives: accessibility for web writers, part 2
- Text alternatives for images: some examples
- Writing text alternatives for maps