Visa Accessibility - Text Alternatives (VIS-005)

VGAR Visual Requirements

Visual

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.

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".