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)
Other Related Success Criterion:
|
Rule Category |
Images |
Scope |
Element |
Target Resources |
img , [role="img"] with short descriptions
|
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 |
|