UNIVERSAL USABILITY IN PRACTICE

 Texual equivalents for audio/video representations of content
Introduction Recommendations Guidelines Websites Research Resources
Guidelines

For textual equivalents for audio/video and animations representations of content:

  • Provide captions or transcripts for important audio content.
  • Provide text or audio descriptions for important video content.
  • Test for universal usability:
    • Search the web page for all multimedia content (audio and video). Review your players¡¦ options that support accessibility features. Information on players is available from the WGBH National Center for Accessible Media [5]. Play the multimedia content without audio then without video.
      • The alternative text is provided without the use of audio.
      • The alternative text is provided without the use of video.

Examples: (Source from IBM Web Accessibility site) The following example illustrates a transcript of speech and other sounds that enable the user to understand the content more clearly:     

    [phone rings]
        Man: Are you going to answer the phone?
        [phone rings]
        [phone rings]
        [phone rings]
        Woman: No, I'm screening my calls.
        [answering machine picks up in the background]

The following is an example of a video description file for the sample movie:

[A computer showing text highlighted in a browser window as the text is read aloud by a synthesizer]
Reporter: Created by IBM, Home Page Reader is a talking Web browser that brings the voice of the Internet to blind and visually impaired users.
[A man sitting at the computer listens to the synthesized voice. Text is highlighted as it is spoken.]
Computer: [synthesized voice of Home Page Reader] ...IBM's new talking Web browser brings the voice of the the Internet to blind and visually impaired users. [video clip ends.]  

For textual equivalents for image representations of content:
Images:

  • Use attribute ALT=¡¨text¡¨ to give textual equivalents for images. Use ALT=¡¨¡¨ for those images that do not convey important information.
  • Test for universal usability:
    • View this page with a graphical browser and move mouse cursor over an 
      image.
      • The alternative text for the image should be displayed as a pop-up tag.
      • Check if the image is important but no text is displayed.
      • Unimportant images should be tagged as ¡§¡¨ when the mouse cursor moves over.
    • View this page with images turned-off in your browser.
      • Every image should be replaced by its alternative text. It is obvious to check which image is not associated with its alternative text.
    • Test your web site with Bobby [9].
      • Bobby will list all the images which don¡¦t have alternative text.

Image Maps:

  • Use image maps to give alternative text for image map hot spots.
  • Test for universal usability:
    • View the page with IBM Home Page Reader (HPR) [10].
      • Hot spots which don¡¦t have alternative text are displayed in HPR.
    • View the page with a graphical browser and use mouse to navigate.
      • The alternative text for each hot spot should be displayed as a pop-up tag when the mouse cursor moves over.
    • View the page with a graphical browser and use keyboard (TAB key) only to 
      navigate.
      • The alternative text for each hot spot should be displayed as a pop-up tag when the visual focus moves to each area of the image map.
    • Test your web site with Bobby [9].
      • Bobby will list all the hot spots which don't have alternative text.

Graphs and Charts:

  • Provide alternative text for information conveyed by the graphs or charts.
  • Use the surrounding text, long description, and D-link techniques [3] (This technique is used when it is not desirable to include all the detail about the graph or chart in the surrounding text.) when appropriate.
  • Test for universal usability:
    • View this page with a graphical browser and move mouse cursor over a graph/chart.
      • Alternative text for the graph/chart should be displayed as a pop-up tag.
      • If no text pops up, the graph/chart is missing its alternative text.
    • View this page with images turned-off in your browser.
      • Every graph/chart should be replaced by its alternative text. It is obvious to check which graph/chart is not associated with its alternative text.
    • Test your web site with Bobby [9].
      • Bobby will list all the graphs/charts which don't have alternative text.

    Examples: (Source from IBM Web Accessibility site)

     

    This pie chart shows the percentage of cars and trucks passing through a toll booth in one hour: 75% of the vehicles were cars; 25% of the vehicles were trucks.

    <img src="piechart.gif" alt="75% cars and 25% trucks.">

     

     

    <img src="piechart.gif" alt="75% cars and 25% trucks.">
    <a href="piechart_desc.html">D</a>

    D

    The first example shows that we can use ¡§ALT¡¨ attribute to give alternative text to the graph. The second example shows the use of D-link technique. When users click the capital D link located on the bottom-right side of the graph, a page will pop up, saying: ¡§This chart shows the percentage of cars and trucks out of the total vehicles passing through a toll booth in one hour. Seventy-five percent of the vehicles were cars; twenty-five percent of the vehicles were trucks.

Previous | Top | Next