Page Content
Image maps are used to define regions within a larger image as links. For instance, a Web site featuring a U.S. map with clickable states uses image maps. Although image maps can be visually appealing, unless special precautions are taken, screen readers will not be able to identify the embedded links.
Synopsis
1. If you use a client-side image map, be sure to include the ALT attribute within each AREA tag (which defines the the hot spot) in order to provide an alternative text link for screen readers. The NAME attribute should also be included in the MAP tag.
WCAG 2.0 Guideline 1.1.1—"All non-text content that is presented to the user has a text alternative that serves the equivalent purpose."
2. If images are used as links in the image map, use the TITLE attribute in an AREA tag to provide a visual tooltip.
3. Avoid CGI server-side image maps whenever possible. Use client-side image maps with the MAP tag instead.
NOTE: Image maps produced by Dreamweaver, FrontPage and other HTML editors are usually client-side image maps.
SECTION 508 Guideline 1194.22 (f)—"Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape."
4. If CGI server-side image maps are needed, then provide a separate
text-based menu.
SECTION 508 Guideline 1194.22 (e)—"Redundant text links shall be provided for each active region of a server-side image map."
Client-Side Versus Server-Side Image Maps
Generally speaking, client-side image maps are preferred to server-side image maps for accessibility purposes. In addition, a server-side image map is more difficult for one person to maintain, because it involves programming a CGI. Therefore client-side image maps are used much more often.
A client-side image map includes coordinates for different links embedded within an image. Some source code for a client-side image map would look like this:
Example Code for Client-Side Image Map
View the Code
Note that the ALT tag is included at the top for the main image, and later for each hot spot. The ALT tag provides a text description of an image for screen reader users. Titles for hot spots are included in order to display tooltips.
<img src="examples/ANGELHeader.jpg" alt="Penn State Links Menu" width="586" height="72" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="245,52,317,72" href="http://www.psu.edu" alt="Penn State Home Page" title="Penn State Home Page" >
<area shape="rect" coords="324,55,366,70" href="http://wwww.lias.psu.edu" alt="LIAS-Libraries Catalog" title="Libraries Catalog" >
</map>
A server-side image map uses a CGI script to access an image map file on your server. The source code for a server-side image map would look like this:
Server-Side Image Map—Avoid
<a href="/cgi-bin/imagemap/psu.map"> <img src="psu.gif" ismap
width="160" height="140" border="0"> </a>
Note that this code does not allow for any ALT or TITLE tags to be included.
To make this server-side client map accessible, you can provide an additional, text-based menu like this one: