All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.
Table of Contents
Official Requirements:
Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 for additional requirements for controls and content that accepts user input.)
Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
Why Is It Required?
We need to provide text-based alternatives to make the non-text content accessible to make sure assistive technology(AT) can convey the information to people with disabilities.
How Do We Fix It?
Images: Give alt attributes to the relevant images
Image links: Provide alt-text that describes the destination of the link
Audio and Video files: Should have captions
Charts and graphs: Short and long descriptions as required to convey the information
CSS images: use an aria-label with role=”img
CAPTCHA: Explain the purpose of CAPTCHA and provide an alternative in another sensory modality.
Are There Any Exceptions?
It is difficult to provide captions for live audios and videos, therefore just provide a descriptive label. If non-text content available on your website creates a specific sensory experience, just provide a description and purpose of the content.
Know Your DFIs
DFI is a simple way to remember or understand your non-text content, it stands for Decoration, Informative and Formatting. If the non-text content available on the website just to increase visual appeal(decoration), generated by visual formatting (CSS), or it is not visible to your users then steps should be taken to ensure that the AT can avoid it.
Mistakes To Avoid
Lastly, we have listed out the common mistakes committed by websites
- Relevant image having no alt attribute
- Images having alt attribute but does not match or conveying the same information as the image
- Two or more different images having the same alt-text
References
