Image maps

• Use client-side image maps and alternative text for image map hot spots.
• If a server-side map is needed, provide equivalent text links.

Server-side image maps are currently not accessible to anyone using nongraphical browsers or browsers with images turned off. Client-side image maps are accessible when the alternative text is supplied for each area of the image map. You must provide alternative text for the image map itself as well.

When an image map requires regions that cannot be defined by an available geometric shape, a server-side map may be used. In this case, provide a list of equivalent links, one for each URL that can be activated through the map. For example, a map of the United States as a server-side map needs a list of the individual states with a combo box or another method for choosing a state. The equivalent links should be as convenient for those who do not use a mouse as the server-side map is for those who do use a mouse.

Back to top

Each section below provides both required and optional techniques that meet Checkpoint 2 from the IBM Web Accessibility Checklist.

Client-side image maps

The following technique is the minimum required for client-side image maps.

• When images are used as client-side image maps with multiple hotspot regions, assign alternative text for each hotspot area of the map. In the following example, the alternative text for the image map ("Home Navigation Bar") is succinct and describes its purpose.

<img src="home.gif" usemap="#HomeNav_Map" alt="Home Navigation Bar" />
<map name="HomeNav_Map">
<area coords="15,7,94,23" shape="rect" href="philosophy.htm" alt="Philosophy" />
<area coords="109,7,176,23" shape="rect" href="portfolio.htm" alt="Portfolio" />
<area coords="196,7,276,23" shape="rect" href="technology.htm" alt="Technology" />
<area coords="300,7,390,22" shape="rect" href="employment.htm" alt="Employment" />
<area coords="407,7,484,23" shape="rect" href="contact.htm" alt="Contact us" />
</map>


Each area of the image map has alternative text that is the same as the text label on the image. A nongraphical browser will render alternative text as the links of the image map. A sighted user using only the keyboard can tab to each area of the image map, see the visual focus indicator, and select that hotspot with the Enter key.

Note: When the cursor is moved over a client-side image map, the alternative text entries are displayed as text pop-ups in supported graphical browsers. However, when image loading is turned off, the alternative text for each area of the image map may not be displayed.

The following technique is recommended for client-side image maps to enhance accessibility.

• Use the title attribute on AREA elements to describe "where" the link is going.

<img src="home.gif" usemap="#HomeNav_Map2" alt="Home Navigation Bar" />
<map name="HomeNav_Map2">
<area coords="15,7,94,23" shape="rect" href="philosophy.htm" alt="Philosophy" title="Our Company Philosohy" />
<area coords="109,7,176,23" shape="rect" href="portfolio.htm" alt="Portfolio" title="Our Product Line" />
<area coords="196,7,276,23" shape="rect" href="technology.htm" alt="Technology" title="Technologies We License for Your Products" />
<area coords="300,7,390,22" shape="rect" href="employment.htm" alt="Employment" title="Employment Opportunities Worldwide" />
<area coords="407,7,484,23" shape="rect" href="contact.htm" alt="Contact us" title="Locations, Phone numbers, and e-mail Addresses" />
</map>



Server-side image maps

Use server-side image maps only if the regions cannot be defined by an available geometric shape. Provide a list of equivalent text links for server-side image maps. Include one text link for each hotspot that can be activated on the map. For example:

<a href="cgi-bin/countries/database">
<img src="worldmap.gif" alt="World Map" ISMAP /></a>
<br />
<a href="austria.html">Austria</a>|<a href="australia.html">Australia</a>|etc.

As an alternative to an inline list of equivalent text links, provide a hypertext link next to the map.

<a href="cgi-bin/countries/database">
<img src="worldmap.gif" alt="World Map" ISMAP /></a>
<a href="countrylist.html">Choose a Country</a>

Back to top

Test the Web site to ensure that it complies with accessibility requirements.

Additional techniques for testing this checkpoint

Tools

You can use the following tools to test this checkpoint:

• A Web accessibility checking tool. Examples of these tools are listed on the Worldwide Web Consortium web site.
• A screen reader

Techniques

The following techniques are required to verify this checkpoint:

Additional testing techniques

In addition to the required tests, these techniques can be used to verify client-side maps are accessible.

• View the page with a graphical browser. Move the cursor over the image map to display the alternative text when the mouse moves over each area in a client-side image map.
• View the page with a graphical browser and use the Tab key to move to each area of the image map.
• Read the page with a screen reader to read the title attribute for the current MAP area.

In addition to the required tests, this technique can be used to verify server-side maps are accessible.

• View the page with a graphical browser. Access the equivalent text links for the server-side map.

For more information on these techniques, see Additional techniques for testing Web accessibility.