Guideline 1: Provide equivalent alternatives to auditory and visual content

It is important to provide text equivalents for non-text elements, such as images, sounds, movies, etc. Assistive technologies are far better able to cope with text, and can output the text to speech synthesisers, or Braille systems. This is not to say that images, sounds, movies, etc, should be removed from a site. A picture paints a thousand words, and audio is easy on the eyes. Relaying information using these methods is beneficial for people who have difficulty reading or comprehending text.

This guideline has 5 checkpoints, ranging in importance from Level "A" (essential for the site to be accessible), to Level "AAA" (beneficial to ensure the accessibility of your site).

1.1 Provide a text equivalent for every non-text element

This checkpoint is a priority 1 checkpoint. It must be satisfied for your site to be considered accessible. You should provide text equivalents for all images, sounds, movies, objects, frames, and scripts. For an image, you should at the very least specify a short description using the alt attribute. As the purpose is to provide information about the image, use descriptive text rather than nonsense.

<img src="car.jpg" alt="My new car" width="200" height="120" />

There will be times when you will need to give a fuller description than is possible to provide using the alt attribute. The longdesc attribute allows you to provide a fuller description by specifying a URI for the full description. If you have long descriptions for several images, you can keep them in a single document used for describing images, with a fragment identifier to jump to the correct description.

<img src="car.jpg" alt="My new car" longdesc="imgdesc.html#car" width="200" height="120" />

Not all browsers support the longdesc attribute, so you may want to consider using a text link directly by the side of the image.

<img src="car.jpg" alt="My new car"
longdesc="imgdesc.html#car" width="200" height="120" />
<a href="imgdesc.html#car">[D]</a>

If you use an image map, each region will require alternative text.

<img src="festival.gif" width="400" height="50" usemap="#nav" alt="Stage Map" />
<map id="nav">
<area shape="rect" coords="1,1,99,50" href="north.html" alt="View the North Stage" />
<area shape="rect" coords="100,1,199,50" href="east.html" alt="View the East Stage" />
<area shape="rect" coords="200,1,299,50" href="south.html" alt="View the South Stage" />
<area shape="rect" coords="300,1,399,50" href="west.html" alt="View the West Stage" />
</map>

1.2 Provide redundant text links for each active region of a server-side image map

This checkpoint is a priority 1 checkpoint. It must be satisfied for your site to be considered accessible. Server side image maps send the coordinates of the mouse to the server for further processing. You should avoid using server-side image maps if possible, as they are inaccessible by text only browsers, visitors using only a keyboard, and some assistive technology programs. The only time a server-side image map should be chosen over a client-side image map is when the geometric shapes are unable to define the map. If you find you have to use a server-side image map, you should provide redundant text links.

<p>
 <a href="http://www.yourdomain.com/processmap.asp">
 <img src="map.gif" alt="Map of area (text links below)" ismap="ismap" />
 </a>
</p>
<p>
 [<a href="start.html">Start</a>]
 [<a href="end.html">End</a>]
</p>

1.3 Provide an auditory description of important information of the visual track of a multimedia presentation

This checkpoint is a priority 1 checkpoint. It must be satisfied for your site to be considered accessible. Visitors who can't see the visual content of a multimedia presentation require an auditory description. By auditory description, this checkpoint requires a spoken description of the multimedia content. For moving images, the auditory would describe the images, such as location, body language, or any other relevant details. The auditory description should be inserted where the audio for the presentation is silent, so as not to interrupt the natural content. Some media programs, such as QuickTime, allow you to add descriptions to the movie directly. If you're unable to add the auditory description to the multimedia content, you should add a text equivalent directly on the page.

1.4 For time-based multimedia presentation, synchronise equivalent alternatives with the presentation

This checkpoint is a priority 1 checkpoint. It must be satisfied for your site to be considered accessible. You should provide a synchronised text description or caption of any important audio or visual information that is relayed from time-based multimedia, for example movies. Some media programs, such as QuickTime, allow you to add captions and descriptions to the movie directly. Visitors who have difficulty hearing will require a textual description.

1.5 Provide redundant text links for each active region of a client-side image map

This checkpoint is a priority 3 checkpoint. It is recommended that you address this checkpoint, but not absolutely necessary for your site to be considered accessible. As with server-side maps, it is recommended that you provide equivalent redundant text links for the map. This ensures that should the image not be displayed (as would be the case with a text-only browser), the links are still obvious to visitors.

<p>
<img src="festival.gif" width="400" height="50" usemap="#nav" alt="Stage Map (text links below)" />
<map id="nav">
  <area shape="rect" coords="1,1,99,50" href="north.html" alt="View the North Stage" />
  <area shape="rect" coords="100,1,199,50" href="east.html" alt="View the East Stage" />
  <area shape="rect" coords="200,1,299,50" href="south.html" alt="View the South Stage" />
  <area shape="rect" coords="300,1,399,50" href="west.html" alt="View the West Stage" />
</map>
</p>
<p>
  [<a href="north.html">North Stage</a>]
  [<a href="east.html">East Stage</a>]
  [<a href="south.html">South Stage</a>]
  [<a href="west.html">West Stage</a>]
</p>