Essential images

Describe only images that are functional or provide information needed for understanding the subject matter. Essential images include the following types:

• Functional images: buttons, icons, headers, images that link to other content
• Informational images: pictures, photos, illustrations
• Images of text: logos
• Complex images: diagrams, flowcharts, screenshots of user interfaces, illustrations of processes

If an essential image is already described in the body text, then you don't need to include the same information in the alt text. For information about how to add blank alt text attributes, refer to Decorative images.

tip

For help with determining what kind of of alt text an image requires, refer to the W3C Web Accessibility Initiative's Alt decision tree.

📄️ Functional images

When an image is used as a link or button, the text alternative must describe the functionality of the link or button rather than the visual image. Examples of functional images include the following:

📄️ Informational images

Informational images graphically represent concepts and information, and typically include pictures, photos, and illustrations. In the alt text, provide a short description of the essential information presented in the image and why it is relevant to the text.

📄️ Images of text

Whenever possible, avoid text in images unless the image is a logo or a screenshot of a user interface. For simple images of text, the text alternative should contain the same words as in the image. For more complex images of user interfaces that include text, refer to Complex images.

📄️ Complex images

Complex images include graphs, diagrams, and screenshots of complicated interfaces. Introduce these types of images in the body text, not in the alt text. In the alt text, include a short description of the essential information presented in the image and why it is relevant to the text.