Alt text decide-o-matic

Reading Time: 2 minutes

Writing alternate text for non-text can be hard. This widget can help you decide which approach to take.

Alt text decide-o-matic

About this

This decision tree will help you understand how best to include text alternatives for image-based content.

It is based on the W3C’s alt text decision tree.

All errors are mine. Give feedback, tell me what’s broken, by leaving a comment here, or via Mastodon.

Does the image contain text?

Please select either Yes or No, then click Next

Is the text also present as real text nearby?

Please select either Yes or No, then click Next

Is the text  only shown for visual effects?

Please select either Yes or No, then click Next

Does the text have a specific function, for example as an icon?

Please select either Yes or No, then click Next

Is the text in the image not present otherwise?

Please select either Yes or No, then click Next

Is the image used in a link or a button, and would it be hard or impossible to understand what the link or the button does, if the image wasn’t there?

Please select either Yes or No, then click Next

Does the image contribute meaning to the current page or context?

Please select either Yes or No, then click Next

Is the image a simple graphic or photograph?

Please select either Yes or No, then click Next

Is the image a a graph or complex piece of information?

Please select either Yes or No, then click Next

Does the image show content that is redundant to real text nearby?

Please select either Yes or No, then click Next

Is the image purely decorative or not intended for the user?

Please select either Yes or No, then click Next

Use alt=””

Use an empty alt attribute. See Decorative Images.

Communicate the function

Use the alt attribute to communicate the function of the image. See Functional Images.

Include the text

Use the alt attribute to include the text of the image. See Images of Text.

Communicate the destination of the link

Use the alt attribute to communicate the destination of the link or action taken. See Functional Images.

Briefly describe the image

Use a brief description of the image in a way that conveys that meaning in the alt attribute. See Informative Images.

Include the information elsewhere

Include the information contained in the image elsewhere on the page. See Complex Images.

Use alt=””

Use an empty alt attribute. See (redundant) Functional Images.

David O'Brien
Website | + posts

I'm a service designer in Scottish Enterprise's unsurprisingly-named service design team. I've been a content designer, editor, UX designer and giant haystacks developer on the web for (gulp) over 25 years.

4 Replies to “Alt text decide-o-matic”

  1. Hi there from Norway’s Department of Work and Welfare 🙂 Thanks so much for producing this alt-text-decide-o-matic — it’s great!

    I found the following question and answers quite difficult to parse (and therefore answer correctly):

    > Is the text in the image not present otherwise?
    > Yes
    > No

    The thing that makes it confusing for me is that “not” in the question. I’m suddenly not sure what it means to answer “yes” to a “not”-question. Could you rephrase it as “Is the text in the image present otherwise?” and then just flip the consequences of answering yes or no? That’d be awesome. Thank you!

    Reply

    1. Hi Chris,

      I’m glad you find it useful. Makes me feel like I’m not completely wasting my time 🙂

      Thanks for the feedback – I agree that the negative phrasing of that question is confusing, and I was hoping someone would confirm that for me.

      However, that is *exactly* how it’s phrased in the W3C decision tree it’s based on, and I didn’t want to deviate from their phrasing. They are, after all, the fount.

      I did have a conversation with someone involved in it on Mastodon about it, but I can’t find that any more 🙁 The thrust of it was that “flipping” the question would disrupt the logical flow of the whole thing.

      I think the best approach here would be to suggest changes to the W3C. If you’re on GitHub, you can report an issue at https://github.com/w3c/wai-tutorials/issues/new

      If not, you can email the list at wai-eo-editors@w3.org

      Good luck, and thanks again for the feedback.

      BTW, I’d be interested to hear how you found it?

      Reply

      1. Also BTW: in the meantime, the W3C’s interpretation is that if the text in the image is not present otherwise, you should answer Yes. If it is present elsewhere, answer No.

        Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.