|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.
HTML4 Legacy Techniques
HTML5 and ARIA Techniques
|WCAG 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.