CARVIEW |
On this page:
H37: Using alt
attributes on img
elements
Important Information about Techniques
See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.
Applicability
Images used within HTML documents.
This technique relates to:
Description
When using the img
element, specify a short text alternative with the
alt
attribute. Note. The value of this attribute is referred to as "alt
text".
When an image contains words that are important to understanding the content, the alt text should include those words. This will allow the alt text to play the same function on the page as the image. Note that it does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image.
Examples
Example 1
An image on a Website provides a link to a free newsletter. The image contains the text "Free newsletter. Get free recipes, news, and more. Learn more." The alt text matches the text in the image.
Example Code:
<img src="newsletter.gif" alt="Free newsletter.
Get free recipes, news, and more. Learn more." />
Example 2
An image on a Web site depicts the floor plan of a building. The image is an image map with each room an interactive map area. The alt text is "The building's floor plan. Select a room for more information about the purpose or content of the room." The instruction to "select a room" indicates that the image is interactive.
Resources
Resources are for information purposes only, no endorsement implied.
Related Techniques
- G82: Providing a text alternative that identifies the purpose of the non-text content
- H2: Combining adjacent image and text links for the same resource
- H24: Providing text alternatives for the area elements of image maps
- H30: Providing link text that describes the purpose of a link for anchor elements
- H45: Using longdesc
Tests
Procedure
Examine each
img
element in the contentCheck that each
img
element which conveys meaning contains analt
attribute.If the image contains words that are important to understanding the content, the words are included in the text alternative.
Expected Results
Checks #2 and #3 are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
This Web page is part of Techniques and Failures for Web Content Accessibility Guidelines 2.0 (see the latest version of this document). The entire document is also available as a single HTML file. See the The WCAG 2.0 Documents for an explanation of how this document fits in with other Web Content Accessibility Guidelines (WCAG) 2.0 documents. To send public comments, please follow the Instructions for Commenting on WCAG 2.0 Documents.
Copyright © 2016 W3C® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and document use rules apply.