An alt Decision Tree
This decision tree describes how to use the alt attribute of the <img> element in various situations. For some types of images, there are alternative approaches, such as using CSS background images for decorative images or web fonts instead of images of text.
- Does the image contain text?
- Yes:
- … and the text is also present as real text nearby.
Use an empty
altattribute. See Decorative Images. - … and the text is only shown for visual effects.
Use an empty
altattribute. See Decorative Images. - … and the text has a specific function, for example is an icon.
Use the
altattribute to communicate the function of the image. See Functional Images. - … and the text in the image is not present otherwise. Use the
altattribute to include the text of the image. See Images of Text.
- … and the text is also present as real text nearby.
Use an empty
- No:
- Continue.
- Yes:
- 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:
- Use the
altattribute to communicate the destination of the link or action taken. See Functional Images.
- Use the
- No:
- Continue.
- Yes:
- Does the image contribute meaning to the current page or context?
- Yes:
- … and it’s a simple graphic or photograph.
Use a brief description of the image in a way that conveys that meaning in the
altattribute. 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
altattribute. See (redundant) Functional Images.
- … and it’s a simple graphic or photograph.
Use a brief description of the image in a way that conveys that meaning in the
- No:
- Continue.
- Yes:
- Is the image purely decorative or not intended for the user?
- Yes:
- Use an empty
altattribute. See Decorative Images.
- Use an empty
- No:
- Continue.
- Yes:
- Is the image’s use not listed above or it’s unclear what
alttext to provide?- This decision tree does not cover all cases. For detailed information on the provision of text alternatives refer to the Image Concepts Page.