Web checklist

A descriptive label is provided for time-based media, including live audio-only or live video-only content. Non-text content that is used to confirm that content is being accessed by a person rather than a computer is available in different forms to accommodate multiple disabilities.

Visually disabled users, especially the blind, must be able to identify and understand the purpose of all content provided as well as filter out content that is purely decorative. Some types of content cause particular difficulty, such as audio and video objects, applets, decorative images and CAPTCHA's (Completely Automated Public Turing test to tell Computers and Humans Apart). For time-based media, such as audio and video clips, it is important to provide a label to briefly describe the subject matter. With this information the user can learn what the media is about and determine whether or not to watch or listen to it. CAPTCHAs create a three-fold problem in that the user must understand its purpose, what needs to be done, and determine the text to enter to pass the test.

Checkpoint 1.1a Text Alternatives covers techniques for text alternatives for images, complex images, audio-only content, video-only content and applets. Text alternatives are required for these objects as part of Section 508. This checkpoint covers additional scenarios that are part of WCAG 2.0 requirements, including CAPTCHA (link resides outside of ibm.com), descriptive labels for non-text content, and using CSS for decorative images.

Back to top

Compliance with this checkpoint requires all of the following techniques to be met.

These techniques are defined in the WCAG 2.0 Level A Success Criterion for Guideline 1.1.1.

1. Descriptive label: Provide a descriptive label for time-based media, including live audio-only or live video-only content; Non-text content that is used to confirm that content is being accessed by a person rather than a computer is available in different forms to accommodate multiple disabilities.
2. CSS images: If the non-text content should be ignored by assistive technology, use CSS to include decorative images.
3. CSS important images: If CSS is used to include important images, provide a text alternative for the image when CSS is disabled.

Examples for general developers

1. Descriptive label: Provide a descriptive label for time-based media, including live audio-only or live video-only content; Non-text content that is used to confirm that content is being accessed by a person rather than a computer is available in different forms to accommodate multiple disabilities.

To comply with this technique, at least one of the following examples must be implemented.

Example 1

• Provide a descriptive label that describes the purpose of live audio-only and live video-only content. For live scrolling content and ticker-tape information provide a description of its purpose. Live video-only: If web site shows a scrolling set of sports scores, the object that displays the scores must have a label. The label can be in the form of alternate text or a description located in the surrounding content. An appropriate label could be: "Live scores from Major League Baseball and the National Football League." Similarly, if the live video is a real time streaming IBM stock quote, the label would say "Live streaming IBM stock price".
• If you are running a live audio-only webcast that includes an executive giving a quarterly report, and users can tune in to the webcast online, the link to the online webcast should be provided and should be labeled something such as "Live audio from the IBM shareholders meeting in Armonk, NY".
• For additional information, refer to WCAG 2.0 examples for providing a descriptive label that describes the purpose of live audio-only and live video-only (link resides outside of ibm.com).

Example 2

• For content intended to provide a specific sensory experience, providing the accepted name or a descriptive name of the non-text content. Even though a blind user cannot see a painting, and a deaf user cannot hear music, it's still required to describe such non-text content for their benefit. For example, if a Web page contains links to music, each link is described with short alternative text that says the name of the piece and the artist. For example: "Imagine by John Lennon". Note that a long alternative can also be used in addition that shows the lyrics of the song, if they are relevant.
• Describe an art piece in a similar fashion, with a short alternative text that includes the artist and any other relevant information. For example: "Wildflowers in a Field, by Susan Mitchell, 1975".
• For additional information, refer to WCAG 2.0 examples for providing the accepted name or a descriptive name of the non-text content (link resides outside of ibm.com).

Example 3

If non-text content is a CAPTCHA, ensure that the Web Page contains another CAPTCHA serving the same purpose using a different modality.

CAPTCHA can be difficult or impossible for low vision and blind users to use. If you use a CAPTCHA that shows a series of letters or numbers, ensure that an audio version of that CAPTCHA is available.

Example 4

If non-text content is a CAPTCHA, provide a text alternative that describes the purpose of the CAPTCHA. Alternative text should be available for all CAPTCHAs. If the user is asked to type in the text from an image, the alternative text should say "Type the word in the image." If the user is asked to listen to an audio file, the alternative text should say "Type in the letters or numbers that are spoken in the audio file".

2. CSS images: If the non-text content should be ignored by assistive technology, use CSS to include decorative images

There are no specific examples for general developers, please refer to the examples for CSS developers for guidance.

3. CSS important images: If CSS is used to include important images, provide a text alternative for the image when CSS is disabled.

There are no specific examples for general developers, please refer to the examples for CSS developers for guidance.

Back to top

Examples for HTML developers

1. Descriptive label: Provide a descriptive label for time-based media, including live audio-only or live video-only content; Non-text content that is used to confirm that content is being accessed by a person rather than a computer is available in different forms to accommodate multiple disabilities.

To comply with this technique, at least one of the following examples must be implemented.

Example 5

Use the body of the object element to provide a text alternative. Browsers render content added using the object element. If the browser is not able to render it for any reason (wrong platform, not supported, etc.) the browser will try to render the object's contents. Provide a text alternative in the body of the object element to ensure an accessible alternative is available.

In the following example, the function of the Gravity object is explained in the text following the object tag. Since the function of the Gravity object does not require user interaction, the text explanation is an accessible equivalent.

<object classid="java:gravity:class" width="200" height="250">
<p>When gravity acts on an object, the weight...</p>
</object>

The code below uses the body of the object element to render a test description of the ibmworld.mpeg file.

<object data="ibmworld.mpeg" type="application/mpeg">
<p>IBM has offices in Argentina, Australia, ... Vietnam.</p>
</object>

For more examples of this technique, refer to WCAG 2.0 examples for using the body of the object element (link resides outside of ibm.com).

Example 6

Provide text alternatives for applet elements. This example shows how the body of the applet element explains the purpose of the applet. Note that alt text is still required for the applet as described in 1.1a, Images and Animations. Even though the applet element has been deprecated, it is still supported and in use.

<applet code="spin-lobe.class" alt="Spinning Globe">
<p>This applet shows how the earth spins from west to east, but the line of darkness appears to move from east to west.</p>
</applet>

For more examples of this technique, refer to WCAG 2.0 examples for using the body of the applet element.

2. CSS images: If the non-text content should be ignored by assistive technology, use CSS to include decorative images

There are no specific examples for HTML developers, please refer to the examples for CSS developers for guidance.

3. CSS important images: If CSS is used to include important images, provide a text alternative for the image when CSS is disabled.

There are no specific examples for HTML developers, please refer to the examples for CSS developers for guidance.

Back to top

Examples for CSS developers

1. Descriptive label: Provide a descriptive label for time-based media, including live audio-only or live video-only content; Non-text content that is used to confirm that content is being accessed by a person rather than a computer is available in different forms to accommodate multiple disabilities.

There are no specific examples for CSS developers, please refer to the examples for General and HTML developers for guidance.

2. CSS images: If the non-text content should be ignored by assistive technology, use CSS to include decorative images

To comply with this technique, the following example must be implemented.

Example 7

Use CSS to include decorative images.

The purpose of this technique is to use CSS to add purely decorative images so they can be turned off or ignored by assistive technologies.

In the next example taken from w3, a printer image is displayed before the link to print a page. This image is decorative and does not add additional meaning. CSS is used to style the links so they can be ignored by assistive technology. The HTML references the CSS class that renders the image.

CSS:
.print-link {background:url(images/icon-link-print.gif) 7px 1px no-repeat;}
HTML:
<a class="print-link" href="javascript:printpage()">Print this article</a>

For more examples of this technique, refer to WCAG 2.0 examples for using CSS to include decorative images (link resides outside of ibm.com).

3. CSS important images: If CSS is used to include important images, provide a text alternative for the image when CSS is disabled.

To comply with this technique, the following example must be implemented.

Example 8

The Dojo widgets use CSS background images for important icons such as those in a toolbar. When CSS is turned off, the icon image is no longer visible, however a text alternative for that image or icon is provided.

Back to top

The techniques above are required; the following techniques are recommended to enhance accessibility:

Implementation of recommended techniques is not required to comply with this checkpoint, but these techniques should be reviewed since they can improve the accessibility and usability of the solution. See WCAG 2.0 Additional Techniques (Advisory) for 1.1.1 non-text content (link resides outside of ibm.com) for a list of techniques and examples.

Back to top

The following test tools and techniques are required to test this checkpoint.

1. Test tools
2. Required accessibility verification test techniques

Back to top