An interactive alt decision tree

Uses CSS :has instead of JS for interactivity

Does the image contain text? yes no

… and the text is also present as real text nearby. Use an empty alt attribute.
… and the text is only shown for visual effects. Use an empty alt attribute.
… and the text has a specific function, for example is an icon. Use the alt attribute to communicate the function of the image.

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? yes no

Use the alt attribute to communicate the destination of the link or action taken. See Functional Images.
This decision tree does not cover all cases. For detailed information on the provision of text alternatives refer to the Image Concepts Page.

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

… and it’s a simple graphic or photograph. Use a brief description of the image in a way that conveys that meaning in the alt attribute. See Informative Images.
… and it’s a graph or complex piece of information. Include the information contained in the image elsewhere on the page. See Complex Images.
… and it shows content that is redundant to real text nearby. Use an empty alt attribute. See (redundant) Functional Images.

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

Use an empty alt attribute.

Is the image’s use not listed above or it’s unclear what alt text to provide? yes no

This decision tree does not cover all cases. For detailed information on the provision of text alternatives refer to the Image Concepts Page.

I suggest you start over.

An interactive alt decision tree

If yes, the image contains text…

If yes, the image is contained in a control…

If yes, the image contributes meaning…

If yes, the image is purely decorative…

If yes, the image’s use is not listed above…

If no, because the image’s use is listed above…