An Alt Decision Tree | Web Accessibility Initiative (WAI) - W3C

• Skip to Content
• Change Text Size or Colors
• This page in:
  • English
  • Deutsch
  • français
  • Bahasa Indonesia
  • 日本語
  • 한국어
  • polski
  • Português do Brasil
  • 简体中文
• All Translations
• Show Customization, Languages, Translations

• Accessibility Fundamentals
• Planning & Policies
• Design & Develop
• Test & Evaluate
• Teach & Advocate
• Standards/Guidelines

• Home
• Design & Develop
• Tutorials
• Images
• An alt Decision Tree

• Design & Develop
• Tips for Writing
• Tips for Designing
• Tips for Developing
• Audio & Video Media
  • User Needs
  • Planning
  • Audio Content & Video Content
  • Description
  • Captions/Subtitles
  • Transcripts
  • Transcribing Audio to Text
  • Sign Languages
  • Media Player
• Tutorials
  • Page Structure
    • Page Regions
    • Labeling Regions
    • Headings
    • Content Structure
    • Full Example
  • Menus
    • Structure
    • Styling
    • Fly-Out Menus
    • Application Menus
    • Application Menu Example & Code
  • Images
    • Informative Images
    • Decorative Images
    • Functional Images
    • Images of Text
    • Complex Images
    • Groups of Images
    • Image Maps
    • An alt Decision Tree
    • Tips and Tricks
  • Tables
    • One Header
    • Two Headers
    • Irregular Headers
    • Multi-level Headers
    • Caption & Summary
    • Tips and Tricks
  • Forms
    • Labeling Controls
    • Grouping Controls
    • Form Instructions
    • Validating Input
    • User Notifications
    • Multi-page Forms
    • Custom Controls
  • Carousels
    • Structure
    • Functionality
    • Animations
    • Styling
    • Working Example
    • Complete Code

• English (original)
• Deutsch
• français
• Bahasa Indonesia
• 日本語
• 한국어
• polski
• Português do Brasil
• 简体中文

All Translations

Translating WAI Resources

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.
  • 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.

• Previous: Image Maps
• Next: Tips and Tricks

Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list [email protected] or via GitHub.

E-mailFork & Edit on GitHubNew GitHub Issue Back to Top