Web checklist

Checkpoint 1.1b: Non-text content

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.


Rationale

Visually disabled users, especially the blind, must be able to identify and understand the purpose of all content. They must also be able to filter out content that is not of interest. Some types of content cause particular difficulty, such as audio and video objects, applets, 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 of the media element. With this information, users can understand the purpose of the media element, which helps them 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 they need to enter in order to pass the test.

Checkpoint 1.1a Text Alternatives provides techniques that require text alternatives for images (both simple and complex) and other non-text content. It also provides requirements for labeling decorative images, so that a screen reader can ignore them. Text alternatives are required for non-text objects as part of Section 508. Checkpoint 1.1b covers additional WCAG 2.0 requirements for non-text content that are not covered by Checkpoint 1.1a, which includes providing descriptive labels for CAPTCHAs (link resides outside of ibm.com) and other non-text content (e.g. multimedia and applets).

Required development and unit test techniques


To comply with this checkpoint, you must meet all of the following techniques, as they apply to our Web content. These techniques are defined in WCAG 2.0 Level A Success Criterion 1.1.1 (link resides outside of ibm.com).

  1. Descriptive label: Provide a descriptive label for time-based media, including live audio-only or live video-only content.
  2. CAPTCHAs: Non-text content that is used to confirm that content is being accessed by a person, rather than a computer, is available in different formats to accommodate multiple disabilities and the CAPTCHA’s label describes its purpose.

Note: The examples presented in the techniques are not exhaustive. They are meant to illustrate the spirit of this checkpoint.

General examples

    • Descriptive label: Provide a descriptive label for time-based media, including live audio-only or live video-only content.

       

      To comply with this technique, you must implement at least one of the following examples.

      General 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 a Web site contains 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 like "Live audio from the IBM shareholders meeting in Armonk, NY".

      For additional information, refer to the WCAG 2.0 examples of providing a descriptive label for time-based media (link resides outside of ibm.com) .

      General example 2

      For content intended to provide a specific sensory experience, provide a descriptive label or name of the non-text content. Do not use filenames or placeholder text as descriptive labels for the audio or video being described

      Even though a blind user cannot see a painting and a deaf user cannot hear music, you must still describe the non-text content for their benefit. For example:

      For additional information, refer to the WCAG 2.0 examples of providing an accepted or descriptive name for non-text content (link resides outside of ibm.com) .

      Required unit tests for general development technique 1

      Perform the following unit tests using a Web syntax analysis tool or a screen reader.

    • CAPTCHAs: Non-text content that is used to confirm that content is being accessed by a person, rather than a computer, is available in different formats to accommodate multiple disabilities and the CAPTCHA's label describes its purpose.

      To comply with this technique, you must implement the following example.

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

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

      Note: For iOS platform: Mobile Safari does not support Java applets, Flash or other third party plugins. Therefore, provide an audio version of a CAPTCHA using the HTML5 audio element. The HTML5 audio element uses the browser's native player, and the controls on the player are not keyboard accessible. Therefore, developers must use the HTML5 audio API, JavaScript and CSS to implement keyboard focusable controls. An example implementation of an accessible HTML5 video/audio player can be found in .chapter 6 of Pro HTML5 Accessibility: Building an Inclusive Web.

      You should also 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 enter 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".

      Required unit test for general development technique 2

      Manually identify each CAPTCHA on the page and verify the page contains another CAPTCHA serving the same purpose using a different modality. For example, if there is a visual graphic CAPTCHA, confirm that there is an audio CAPTCHA that serves the same purpose.


    HTML examples

    1. Descriptive label: Provide a descriptive label for time-based media, including live audio-only or live video-only content.

      To comply with this technique, you must implement at least one of the following examples.

      HTML example 1

      Use the body of the <object> element. Browsers render content 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> element. 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 additional information, refer to the WCAG 2.0 examples for using the body of the object element (link resides outside of ibm.com) .

      HTML example 2

      Provide text alternatives on <applet> elements. This example shows how the body of the <applet> element explains the purpose of the applet. Note that alternative text is still required for the applet, as described in Checkpoint 1.1a: Text alternatives. The <applet> element is deprecated in HTML4x and it has been deemed obsolete in HTML5.

      <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 additional information, refer to the WCAG 2.0 examples of providing text alternatives on applet elements (link resides outside of ibm.com) .

      HTML Example 3

      Provide text alternatives for the HTML5 <audio> and <video> elements. When a browser does not support these elements, the alternative text is displayed.

      <video ....>
      <p>When gravity acts on an object, the weight....</p>
      </video>
      <audio ....>
      <p>IBM has offices in Argentina, Australia, ... Vietnam.</p>
      </audio>

      Required unit tests for HTML development technique 1

      Perform the following unit tests using a Web syntax analysis tool or a screen reader.

    2. CAPTCHAs: Non-text content that is used to confirm that content is being accessed by a person, rather than a computer, is available in different formats to accommodate multiple disabilities and the CAPTCHA's label describes its purpose.

      There are no specific examples for implementing this technique in HTML. Use the general examples as a guide.


    Recommended development techniques

    Although you do not have to implement the recommended techniques in order to comply with this checkpoint, you should review them since they can improve the accessibility and usability of the application. Refer to the WCAG 2.0 Additional Techniques (Advisory) for Success Criterion 1.1.1 (link resides outside of ibm.com).

    Recommended development example 1

    Provide descriptive text for the embed element in a non-embedded element. Refer to the Recommended development examples in Checkpoint 1.1a: Text Alternatives.


    W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/ (link resides outside of ibm.com)

     

    Copyright © 1994-2014 World Wide Web Consortium, (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University, Beihang). All Rights Reserved.