§ Section 508 1944.22 (b): Redundant text links shall be provided for each active region of a server-side image map
Image maps are images sectioned into regions or "hot-spots" which are associated with a URI. They are often used for navigation links.
The image map consists of a graphic image and an associated map file. The "hot-spot" is created by defining coordinates of a geometric area on the image. The map file contains a list of links, each associated with the coordinates of the hot-spot.
There are two types of image maps.
Client-side Image Maps
In a client-side Image map, when a "hot spot" is selected, the browser interprets the coordinates and activates the associated URL in the map file. The "usemap" attribute of the <img> element is used is set to the name of the map file. Since the map file information is available to the browser, an "al" attribute can be set for each link, making the client-side image map accessible to both screen readers and to non-graphical browsers.
Code for Client-side Image Map
Example of image map with a map file using alt attribute - Preferred method
<img src="navbar1.gif" usemap="#map1" alt="navigation bar">
<mapP name="map1">
<area href="index.html" shape="rect" coords="0,0,118,28" alt="home page">
<area href="contactus.html" shape="rect" coords="118,0,184,28" alt="contact us">
</map>
Example of image map with map file not using alt attribute - Another method
<img src="navbar1.gif" usemap="#map1" alt="navigation bar>
<map name="map1">
<a href="index.html" shape="rect" coords="0,0,118,28">Home Page</A> |
<a href="contactus.html" shape="rect" coords="118,0,184,28">Contact Us</A>
</map>
Server-side Image Maps
With server-side image maps, the map file resides in the same location as the page on the web server. The <img> includes the attribute "ismap" which informs the browser that the image is an image map. The <img> element is placed inside the <a> element that specifies the href to the map file. When a "hot-spot" on an image is activated, the action is sent to a server side agent (CGI) specified by the "href" attribute of the <a> element. The server-side agent interprets the coordinates and activates the associated link.
Code for Server-side Image Map
<a href="http://myurl.com/cgi-bin/mymap.map"> <img src="navigation.gif" ismap alt="navigation bar"></a>Since the underlying information on the links is not available to the user, server-side image maps are not accessible to screen readers and non-graphical browsers. When using server-side image maps it is important to provide a separate set of links on the page to represent each hot spot.
