Image Maps in HTML

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. Altough 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."

Top of Page

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

Penn State Links Menu Penn State Home Page LIAS-Libraries Catalog Penn State Directory Penn State Registrar Penn State Google Search

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>

 

Top of Page

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:

Accessible Text-Based Menu for Server-Side Image Maps

About Penn State | Prospective Students | Academic Units

Top of Page