Alt text must summarize purpose

Rule ID Image 2
Definition The text alternative for img elements and elements with [role="img"] must summarize the content and/or purpose of the image.
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.
Mappings
  • HTML4 Legacy Techniques (Required)
  • HTML5 and ARIA Techniques (Required)
WCAG Success Criteria

1.1.1 Non-text Content (Level A, Primary Success Criterion)

Rule Category Images
Scope Element
Target Resources img, [role="img"] with short descriptions
  • img
Techniques
  • 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="presentation" 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.
Manual Checks
  • Find each image on the page and verify that it is only being used decoratively or is redundant with other information on the page.
Informational Links