VGAR Visual Requirements
Requirements
Visual
- Support Zoom (VIS-001)
- Not Only Color (VIS-002)
- Color Contrast (VIS-003)
- No Images of Text (VIS-004)
- Text Alternatives (VIS-005)
- Audio Visual Media (VIS-006)
Text Alternatives (VIS-WEB-005)
Provide proper alternative text and robust access to various image types
Images and other non-text content must have accurate alternative text applied to them that provides equivalent information, context, and purpose to the user.
An example is an image of a product on an ecommerce site. If the image alternative text is something like “image001.jpg” the non-sighted user has no concept of what the image presents. However, if the alternative text describes the product color, size, or other features it becomes useful for the non-sighted user and allows the user to gather the same information a sighted user can from the page.
Requirements
Text Alternatives (VIS-WEB-005-01)
All non-text content MUST provide text alternatives that provide equivalent information, context, and purpose to the user using the following techniques (as applicable):
- For 'img' elements, provide the text alternative using the alt attribute
- For other non-text content (i.e. role="img"), aria-label/labelledby, or visibly hidden text
<img src="images/img.png" alt="A painting by Salvador
Dali. Clocks are melting and elephants have long skinny legs." />
Decorative Images (VIS-WEB-005-02)
All non-text content that is decorative, provides no contextual value, or is already defined by surrounding content MUST be hidden from Screen Reader users using the following techniques (as applicable):
- For img, provide alt="" (alt null)
- For role="img", aria-hidden="true"
Test Procedures
Web Dev Toolbar > Images (VIS-WEB-005-01-T)
On the Web Developer Toolbar, choose:
- Images > Hide Background Images
- Images > Outline Images > Outline All Images
- Images > Display Alt Attributes
Confirm that all non-text content provides text alternatives that provide equivalent information, context, and purpose to the user.
Note: given the variety of possible situations, testers may need to investigate further than the above steps allow (e.g. using Firebug).
Web Dev Toolbar > Images (VIS-WEB-005-02-T)
Confirm that all non-text content that is decorative, provides no contextual value, or is already defined by surrounding text is hidden from the user using the following techniques (as applicable):
- For , provide alt="" (alt null)
- For role="img", aria-hidden="true"
Related Content
WCAG Success Criteria
W3C Techniques
- G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
- ARIA6: Using aria-label to provide labels for objects
- ARIA10: Using aria-labelledby to provide a text alternative for non-text content
- G196: Using a text alternative on one item within a group of images that describes all items in the group
- H2: Combining adjacent image and text links for the same resource
- H35: Providing text alternatives on applet elements
- H37: Using alt attributes on img elements
- H53: Using the body of the object element
- H86: Providing text alternatives for ASCII art, emoticons, and leet speak
Common Failures
- F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information
- F13: Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image
- F20: Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when changes to non-text content occur
- F30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g., filenames or placeholder text)
- F38: Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them
- F39: Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g., alt=”spacer” or alt=”image”) for images that should be ignored by assistive technology
- F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type 'image'
- F67: Failure of Success Criterion 1.1.1 and 1.2.1 due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information
- F71: Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative
- F72: Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text alternative
These materials and steps outlined on this website are provided “AS IS” and are intended for illustrative purposes only. They should not be relied upon for marketing, legal, tax, financial, regulatory or other advice. You are responsible for the legal aspects of any implementation of the concepts illustrated herein. Further, Visa neither makes any warranty or representation as to the completeness or accuracy of this information, nor assumes any liability or responsibility that may result from reliance on such information. You should not act or rely on such content without seeking the advice of a professional. All brand names, logos and/or trademarks are the property of their respective owners, are used for identification purposes only, and do not necessarily imply product endorsement or affiliation with Visa.