Question 1: Does the Web site contain auditory information and visual images?

Auditory information is sound clips (e.g., Real Player, Media Player, QuickTime, and .wav files). Visual information includes images (GIF, JPEG or PNG formats that may appear as text, drawings, photos, buttons, etc.), maps, graphical buttons, and animated GIFs. Auditory and visual images are used by Web site developers to enhance sites and to present information in formats other than text.

Why does this present a problem?

Some people with visual impairments and learning disabilities use text-to-speech screen readers that read aloud text appearing on the screen. However, screen readers cannot read content presented in an image or graphic format. Also, individuals with older computers or slow Internet connections may surf with image loading turned off and will miss information presented visually.

Likewise, information presented audibly will be inaccessible to individuals with hearing impairments, to those who have turned their speakers off when working in an environment where noise may disturb others (e.g., in an office or library), for individuals having difficulty understanding spoken language or accent, and to those using computers with no sound card.

What are the solutions?

When using auditory information and visual images, providing equivalent information is crucial. Equivalent information is content that conveys the same information as the auditory or visual content, such as providing captioning for a movie clip.

1. Use text equivalents

For individuals with visual impairments and for those surfing with images turned off, text equivalents replace images or graphics by providing the same information.
In HTML, the key to providing text equivalents is the ALT attribute. Quite simply, the ALT (meaning "alternative") attribute provides a brief description that serves as an alternative to an image when the image is not viewed.
Provide text equivalents for every non-text element, including images (JPEG, GIF, PNG), image map regions, animated GIFs, graphical buttons, etc.

Guidelines for developing ALT attributes:

As text equivalents, ALT attributes should fulfill the same function as the image.

For example:

ALT="Canadian flag"

conveys the same information as an image of the Canadian flag when presented to users.
Ensure the wording of ALT attributes is concise or terse. Avoid starting each ALT with a phrase such as "this button will…" This would unnecessarily slow down individuals using screen readers.
Consider the length of the ALT text in relation to the size of the image. If possible, the text should display within the image space when images are off. For ALT attributes greater than 150 characters, consider providing a separate description (see next bullet).
For complex content (e.g., a chart, table, or diagram) where the ALT text does not provide a complete text equivalent, the description can be included in the text of the main Web page, or placed in a separate page for this purpose and referenced by using the LONGDESC attribute or (descriptive) D-link.
The D-link, a convention established by the CPB/WGBH National Center for Accessible Media (http://main.wgbh.org/wgbh/pages/ncam/), is a way to link manually to the target of the LONGDESC by linking a D positioned near the image. As most current Web browsers do not yet support the LONGDESC attribute, it is recommended that both LONGDESC and D-link be used.

For example:

<IMG SRC="chart.gif" ALT="Chart comparing salaries of the top five occupations" LONGDESC="http://www.thismachine.com/salaries.txt">

<A HREF="salaries.txt">D</A>
Do not specify irrelevant alternate text when including images for purely decorative purposes. For instance, when an image of a red ball is used for decorating a heading or paragraph, rather than using:
ALT="red ball"

simply use the empty ALT attribute:

ALT=" "

Even though the ALT attribute is empty, it is still necessary to use one. Otherwise, without an ALT attribute present, a screen reader will simply read "image" when encountering a graphic.

However, when using an image for a bullet in a list of items, an appropriate text equivalent may be:

ALT="*"

This will assist those using screen readers to differentiate listed items.

TIP Some Web design software programs, e.g., WYSIWYG (what-you-see-is-what-you-get) editors, automatically use the file name and size as the default ALT.

For example:

ALT="image1.gif 546 bytes"

This is uninformative and rather boring to listen to when read aloud by a screen reader. Good Web designers make it a practice to add appropriate, informative ALT attributes in each required instance.

2. Include redundant text links with server-side image maps

Web browsers, when used with a screen reader or when used with image loading turned off, have no way of accessing the hot-spots in a server-side image map. If the links at these hot-spots have no corresponding link in the body of the Web page then whole portions of a Web site can become unreachable.
For each hot-spot, provide a text link elsewhere. For example, when providing a map of British Columbia with different regions on which users can click for more information, also list regions as hypertext links elsewhere on the page.

3. Provide auditory description and captioning

When providing audio clips, also provide captions or a transcription.
When providing video clips, provide captions or transcription as well as an auditory description of important visual information. Auditory descriptions provide information about the action, body language, graphics, and scene changes in the video. Without verbal descriptions of this visual information, people who cannot see (or look at) the visual content are not able to perceive it.

4. Synchronize equivalents

Ensure captions and auditory descriptions are synchronized with the multimedia presentation.

5. Include redundant text links with client-side image maps

Client-side image maps allow ALT attributes to be added to individual links. However, because some browsers and assistive technologies do not interpret the ALT attributes correctly, include redundant text links for each linked portion of the image map.

What is the bottom line?

The bottom line, as stated in WCAG Guideline 1, is provide equivalent alternatives to auditory and visual information.

Copyright: Human Resources Development Canada and Ministry of Advanced Education
Maintained by ... Centre for Curriculum Transfer and Technology ... January 2002
For more information, contact curriculum@c2t2.ca