Skip Navigation

Accessibility Example 3. C.

3.  Provide equivalent alternatives to auditory and visual content, including images, graphics, animated graphics, image maps, video clips and audio clips. 

C.  REQUIRED: Image maps must include "alt" attributes for all hyperlinks. Describe the graphic image used for the image map by providing an "alt" attribute with the <AREA> tag or provide a hyperlink for a text html page, which describes the graphic image map. Use only client-side image maps. To assist users who have difficulty with fine motor movements, design image maps that don't require extremely precise mouse positioning.

What you see:
Site Navigation Links Maps Search Directories WebMail

FrontPage 2000 Instructions:
  1. Select the image you want to turn into an image map.
  2. Select one of the image map buttons (rectangle, circle, or polygon) in the Pictures toolbar.
  3. Place the pointer where you want the hot spot and then move or size the hot spot as necessary.
  4. Once the hot spot is drawn, the Create Hyperlink dialog box will appear.
  5. After you have completed the hyperlink, click the OK button.
  6. To add the "ALT" tag to the entire image, click on the HTML tab and type ALT="description of image" at the end of the image tag (<IMG SRC=" ..">). The HTML source code should match the code below.
  7. To add the "ALT" tag to each hot spot, click on the HTML tab and type ALT="description of hot spot" at the end of each hot spot tag (<AREA SHAPE=...>). The HTML source code should match the code below.

Dreamweaver 4 Instructions:

  1. Select the image you want to turn into an image map.
  2. Select one of the image map buttons (rectangle, circle, or polygon) in the Properties Window.
  3. Place the pointer where you want the hot spot and then move or size the hot spot as necessary.
  4. Once the hot spot is drawn, the Hotspot Window will appear.
  5. Fill in the hyperlink address in the Link box and the description of the image in the Alt box.

 

HTML Source Code:
NOTE -- the first <area> tag provides a way for those using speech synthesis software to skip over repetitive links. For more information, see Guideline 4b.
  

<img src="/images/nav_home.gif" border="0" width="437" height="37" usemap="navmap" alt="Site Navigation Links">

<map name="navmap">

<area shape="rect" coords="13, 3, 83, 33" href="http://www.apsu.edu/map/index.htm" alt="Maps" title="Find Your Way Around Campus">

<area shape="rect" coords="234, 3, 311, 30" href="http://www.apsu.edu/search/" alt="Search" title="Search APSU">

[rest of map]

</map>