Alternative Text

Describe visual content to improve understanding for those who cannot see.

Ensure all photography and informational graphics include alternative text that includes the same information or describes a photograph to convey similar meaning for a screen reader.

For complex graphics, try to include descriptive text beside the graphic with all the information. Then, the alternative text can be shorter, or the image can be marked as decorative.

For example, if all the dates and information for a poster advertising "Shrek the Musical" are included elsewhere on the page, the alternative text could be something like “Shrek the Musical poster.”

An alt Decision Tree

• 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.
  • No:
    • Continue.
• 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.
  • No:
    • Continue.
• 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.
  • No:
    • Continue.
• Is the image purely decorative or not intended for users?
  • Yes:
    • Use an empty alt attribute. See Decorative Images.
  • No:
    • Continue.
• 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 Images Tutorial.

This chart is based on the Images tutorial from the Web Accessibility Initiative (WAI): An alt decision tree. Eric Eggert Shadi and Abou-Zahra, ed. Copyright © 2024 W3C® (MIT, ERCIM, Keio). Status: Updated 13 May 2024. https://www.w3.org/WAI/tutorials/images/decision-tree/