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. (Level A)
- Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose.
- Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content.
- 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.
Description
Images, charts, graphs, audio/video content, etc are considered as non-text content. People with certain disabilities will not be able to perceive the information conveyed through non-text content unless an alternate way is provided to convey the same.
For example, a visually challenged user may not understand if an image of phone is provided to represent a contact phone number. An alternate text need to be provided to convey the intention of the image.
People who use assistive technologies will be benefited from the alternate text of non-text content. For instance screen readers will be able to read the alternate text, users who have both hearing and visual difficulty can perceive the alternate text content via refreshable braille display.
In case of complex images such as graphs, charts and audio video content a simple alternate text label can be provided to notify the user about the element and detailed description needs to be provided in a separate page or separate portion of the same page.
For example, if a chart shows the sales of a vehicle for 10 years the alternate text of the image will be “Sales from 2001 to 2010†and a link to the detailed description should be provided adjacent to the chart.
Images are also used for certain controls such as buttons. Providing appropriate alternate text that represents the action (Submit, Cancel, Close) along with the appropriate role will help the user to interact with the web page more comfortably.
Icons with links is another situation where providing alternate text to the icon and text description makes duplication of content. Content authors tend to remove the “alt†to the icon, but this throws error while validating. Provide “alt†attribute to the icon and make it empty (alt=â€â€) and provide the text description for the link combining both the image and the anchor tag shown as below.
<a href=”sales.html”><img src=”sales.jpeg” alt=”” />Sales Of the vehicle</a>
How to provide alternate text
Using alt attribute of HTML.
<img src=”images/phone.png” alt=”Contact phone number” />
Using ARIA-label
<img src=”images/phone.png” ARIA-label=”Contact Phone Number” />
Exceptions for non-text content
In the following situations alternate for non-text can be exempted.
- If the non-text content is a control that accepts user input provide a name or label to identify the same.
- If the non-text content is a time based media, a link to descriptive text alternate should be provided.
- 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.
- 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.
- 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. Read our article on CAPTCHA accessibility.
- 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. Using empty “alt†attribute or by using ARIA role as presentation the decorative images can be made ignored by assistive technologies.
