Text alternatives for images: a decision tree

4 Comments Written on December 15th, 2010 by
Categories: Accessibility, Articles

[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.

Decision tree - full text version below

1. What role does the image play?

Purely decorative?

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.

Sensory?

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.

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 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.

Yes

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

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

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=”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.

Print version

Decision tree (PDF 260 KB)

Related articles

 

 

4 comments “Text alternatives for images: a decision tree”

Dey,

I’ve just had the “why didn’t I think of this” moment!

Can you make the image available as PDF? I’d like to print it out, wrap it up and hand it out as an end-of-year gift to all web people I know…

I’ve had a draft sketch of this hanging around for a few years, and decided I finally needed to do something about it. Glad you like it. And yes, I’ll make a PDF version for you.

What a great visual! Just printed it out to hang on the wall of my office.

This must be the best info graphic ever! I’m going to share this with my team, and refer to it in my presentations.

Thanks, Dey!