
How to use the ‘alt’ attribute of the
element in various situations – An alt Decision Tree
in Images Tutorial
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
alt
attribute. See Decorative Images. - … and the text is only shown for visual effects.Use an empty
alt
attribute. See Decorative Images. - … and the text has a specific function, for example is an icon. Use the
alt
attribute to communicate the function of the image. See Functional Images. - … and the text in the image is not present otherwise.Use the
alt
attribute 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
alt
attribute 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
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.
- … 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
alt
attribute. See Decorative Images.
- Use an empty
- No:
- Continue.
- Yes:
- Is the image’s use not listed above or it’s unclear what
alt
text 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.
-
Sale!
New Logo Design – High Resolution
Original price was: R650,00.R450,00Current price is: R450,00. -
Sale!
Business Card Design – High Resolution
Original price was: R650,00.R450,00Current price is: R450,00. -
Sale!
Email Signature Design – High Resolution
Original price was: R650,00.R450,00Current price is: R450,00.