# VGAR Visual Requirements Visual --- - [Support Zoom (VIS-001)](https://developer.visa.com/pages/accessibility/visual/vis-001) - [Not Only Color (VIS-002)](https://developer.visa.com/pages/accessibility/visual/vis-002) - [Color Contrast (VIS-003)](https://developer.visa.com/pages/accessibility/visual/vis-003) - [No Images of Text (VIS-004)](https://developer.visa.com/pages/accessibility/visual/vis-004) - Text Alternatives (VIS-005) - [Audio Visual Media (VIS-006)](https://developer.visa.com/pages/accessibility/visual/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. ```javascript ``` --- #### 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 img, provide alt="" (alt null). - For role="img", aria-hidden="true". --- ### Related Content #### WCAG Success Criteria - [1.1.1 Non-text Content](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html) #### 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](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/G94) - [ARIA6: Using aria-label to provide labels for objects](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/ARIA6) - [ARIA10: Using aria-labelledby to provide a text alternative for non-text content](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/ARIA10) - [G196: Using a text alternative on one item within a group of images that describes all items in the group](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/G196) - [H2: Combining adjacent image and text links for the same resource](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/H2) - [H35: Providing text alternatives on applet elements](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/H35) - [H37: Using alt attributes on img elements](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/H37) - [H53: Using the body of the object element](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/H53) - [H86: Providing text alternatives for ASCII art, emoticons, and leet speak](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/H86) #### Common Failures - [F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F3) - [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](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F13) - [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](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F20) - [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)](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F30) - [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](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F38) - [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](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F39) - [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'](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F65) - [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](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F67) - [F71: Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F71) - [F72: Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text alternative](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F72)