Text alternatives for images: a decision tree

[Note: updated January 2013]

To help web writers write better text alternatives for images, we’ve produced this decision tree.  It asks three main questions.

1. What is the role of the image?

Decorative?

If the image plays a purely decorative role on the page, use a blank text alternative: (alt=”").

Of course, 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, you could use a very 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).

Sensory?

If the image is a work of art, designed to provide a specific sensory experience, the guidelines allow you to provide a descriptive identification as the text alternative. You’ll probably want to include the title of the work, the artist’s name, the year it was produced and the medium.

This information may be of interest to sighted readers too, so you may want to use this information in a caption, rather than the alt text. If you do this, you’ll still need a short alt text. Don’t leave it blank. You could use just the title or the artist’s name. Or you could try (alt=”Photo of”), then no information is repeated but a screen reader user will still be alerted to the presence of an image.

Informative?

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 (from the text, links or text alternatives for other images or image slices), use a blank text alternative: (alt=”").

No, it’s a duplicated link

If the image is a link and duplicates a nearby text link, wrap the link anchor around the image and the text link to create a single link. Then use a blank text alternative for the image. If you don’t know how to do this, talk to your web manager.

Yes

If the image presents new information, consider the third question.

3. What type of information is communicated in the image?

Short information

If the information in the image can be communicated with a short text alternative, then use that as your alt text:  (alt=”your short text”).

A link

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=”link text”).

Longer or more complex information

If the content is much longer or complex, or requires some structure, then you have some options to consider:

• include the longer text on the same page as the image (as I’ve done here for the decision tree image)
• create a new page with the longer text and link to that from the page where you’ve used the image (I could have added a link above or below the decision tree image that said “text version of the decision tree”)
• link to a page with the longer text using the longdesc attribute of the image tag: (longdesc=”decision-tree-text.html”).

In each of these cases, you’ll still need a short text alternative to alert users to the presence of an image. A good idea is to also tell them where the long text alternative is.  For example  (alt=”decision tree – described below”), as I’ve used here.

Print version

Decision tree (PDF 51 kb)

Related articles

• Writing text alternatives: accessibility for web writers, part 2
• Text alternatives for images: some examples
• Writing text alternatives for maps

You can subscribe to any comments to this entry via RSS 2.0. Both comments and pings are currently closed.