Text alternatives for images: a decision tree

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

[Note: updated May 2014]

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

Decision tree - 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=””). A screen reader will then ignore it.

If you use decorative images regularly, ask your web designer or developer to create a style you can use to include the image via a style sheet.

NOTE: In Word documents (not web pages or PDF documents) screen readers won’t ignore decorative images. So you need to use a short text alternative—something as simple as ‘decorative’ will do. Then a screen reader user knows they’re not missing any important content.

Sensory?

If the image provides a ‘specific sensory experience’ (for instance, if it’s a work of art), write a ‘descriptive identification’ as the text alternative or caption. Include the title of the work, the artist’s name, the year it was created, and the medium.
If you use the descriptive identification as the caption, you’ll need a short label as the ALT text. Try the title (alt=”Title of work”) or use a label that makes sense when read with the caption (alt=”Photo of”). Don’t leave the ALT blank, or a screen reader user may not realise the caption belongs to 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 use a blank text alternative: (alt=””). This saves a screen reader user from listening to content twice.

No, it repeats a link

If the image is a link and repeats 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 does the image communicate?

A link

If the image is a link, write something that identifies the linked content just as you would when adding a text link: (alt=”label for link”).

Short, simple information

If the image contains a short or simple message 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 that makes sense when read with the caption.

Longer or more complex information

When an image presents longer or more complex information, write a long text alternative. You can add this to:

  • the same page as the image (as I’ve done here for the decision tree image)
  • a new page,  linked
    • below the image (I could have added a link below the decision tree image, saying “text version of the decision tree”)
    • from the LONGDESC attribute of the image: (longdesc=”decision-tree-text.html”).

You still need a short ALT text to label the image. And use it to tell users where to find the long text alternative (alt=”decision tree – text version below”).

NOTE: Web browsers don’t alert users to LONGDESC links. Only screen reader users will know there’s a linked text version of an image if you use this technique. We recommend using a visible link instead.

Print version

Decision tree (PDF 243 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!