||The text alternative for
img elements and elements with
[role="img"] must summarize the content and/or purpose of the image.
- 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.
||Yes for HTML5 and ARIA Techniques ruleset mapping
|WCAG 2.0 Success Criteria
1.1.1 Non-text Content (Level A, Primary Success Criterion)
img, [role="img"] with short descriptions
- 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.
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
aria-label attribute should only be used to provide a text alternative in the special case when an element has a
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
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.
- Find each image on the page and verify that it is only being used decoratively or is redundant with other information on the page.