OpenA11y Evaluation Library

Alt text must summarize purpose

Rule ID Image 2
Conformance Required
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.
Conformance Required
WCAG Success Criteria

Success Criterion 1.1.1 Non-text Content

Other Related Success Criterion:

Rule Category Images
Rule Scope Element
First Step no
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="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.
Information Links