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.

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.