Accessible Design: Best Practices

Image Maps

An "image map" is a picture (often an actual map) on a web page that provides different "links" to other web pages, depending on where a user clicks on the image. There are two basic types of image maps: "client-side image maps" and "server-side image maps."

Client-Side Image Maps

With client-side image maps, each "active region" in a picture can be assigned its own "link" that specifies what web page to retrieve when a portion of the picture is selected. HTML allows each active region to have its own alternative text, just like a picture can have alternative text. Because of the potential accessibility problems with server-side image maps, client-side image maps should be used in a majority of cases.

Here is an example of a client-side image map. There are two link "areas" on this image -- can you locate them?:

Here is the code that inserts the image and creates the image map:

<img src="../images/disabilitystudiestopbar3.jpg" alt="Disability Studies at OSU" name="disabilitystudies" width="400" height="55" border="0" usemap="#Map" id="disabilitystudies">
<map name="Map">
<area shape="rect" coords="4,5,59,45" href="http://www.osu.edu" alt="OSU Home Page">
<area shape="rect" coords="77,3,396,50" href="http://ada.osu.edu/disabilitystudies" alt="Return to Disability Studies Home Page">
</map>

Notice that each <area shape> tag has its own ALT tag (alt="description"). In addition, the image itself is given an ALT tag. Some screen readers will only read the ALT tag for the base image and will only make the first link available to activate. This is not a backwards-compatible HTML element for screen readers.

Server-Side Image Maps

In contrast to client-side maps, clicking on a location of a server-side image map only specifies the coordinates within the image when the mouse was depressed. The ultimate selection of the link or URL must be deciphered by the computer serving the web page. Because, in most cases, keyboard users cannot move the cursor to particular coordinates on the page, this kind of image-map is not accessible. Thus, Web designers must provide an alternate/accessible version in the form of redundant text links that can be accessed using the keyboard only.

Most novice designers and webmasters of non-dynamic sites use only client-side image maps. Creation and use of server-side image maps requires advanced programming experience.

Image Map Usability

Regardless of whether you use client-side or server-side image maps, this strategy for creating navigation results in questionable usability for your visitors. Will they know that the image has links associated with it? How will they be able to distinguish from one link to another?

Many designers use something similar to this:

The navigation bar above contains seven square images with pictures or graphics. Each square is a link. However, nothing about the picture or graphic explicitly indicates what the link leads to. This technique is known as "Mystery Meat Navigation," because users do not know what the link contains until they "look under the wrapping." Even image-maps with clear "link areas," like this one, can be confusing and difficult to navigate.

Image-maps are used most appropriately on actual maps -- images of streets or areas that allow users to click on sections to get more information about or a zoomed view of that particular area. They are not appropriate for site navigation.

return to top

Next