Rule: Alt text must summarize purpose

• Images can convey a wide range of content and be used for many different purposes on a web page, from button and icon images that perform simple actions to complex graphics that help people visualize the features and relationships of large data sets.
• Markup supports creating both short and long text alternatives. A short text alternative is designed to orient people who cannot see the image to the type of content it contains or its purpose on the page. A long text alternative or long description provides comprehensive details of the features of an image, e.g., the data used to generate a chart or graph, relationships in a flow chart, or a MathML version of a mathematical equation.
• Images that function as buttons and perform an action on the page should have a short text alternative that is as succinct as possible (e.g., "Increase text size").
• Informative images of photographs need a short text alternative and additionally can often benefit from long descriptions.
• Informative images of charts or graphs need both a short text alternative and a long description to describe its purpose and the data used to create it.
• If an image that is informative does not have text alternative content, users of assistive technologies will not have access to the information the image conveys.

Success Criterion 1.1.1 Non-text Content

Other Related Success Criterion:

• Use the alt attribute on img elements to provide a text alternative for the image. A rule of thumb is to use what you would say to someone over the phone to describe the image.
• The aria-labelledby attribute can be used to provide a text alternative when images can be described using text already associated with the image, such as a visible caption, or for elements with role="img".
• The aria-label attribute should only be used to provide a text alternative in the special case when an element has a role="img" attribute.
• The title attribute will be used by assistive technologies to provide a text alternative if no other specification technique is found. NOTE: Using the title attribute will also generate a tooltip in some browsers.
• Use the attributes alt="", role="none" or include the image as a CSS background-image to identify it as being used purely for stylistic or decorative purposes and that it should be ignored by people using assistive technologies.

• HTML 5 Specification: 12.2 The @img@ element
• Accessible Rich Internet Applications (WAI-ARIA) 1.2: The @img@ role
• Accessible Rich Internet Applications (WAI-ARIA) 1.2: The @aria-label@ attribute
• Accessible Rich Internet Applications (WAI-ARIA) 1.2: The @aria-labelledby@ attribute
• HTML Specification: IMG element ALT Attribute
• Web Accessibility Tutorials : Images
• Diagram Center: Image Description
• G94: Providing text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
• G95: Providing text alternatives that provide a brief description of the non-text content
• WebAIM: Alternative Text
• Accessibility at Penn State: Text Equivalents for Images
• Diagram Center: Digital Image And Graphic Resources for Accessible Materials