Server-Side and Client-Side Image Maps

General comments

The following information is derived from the DOJ Discussion of Rules e and f.

Image maps are graphic images that allow the user to click on parts of the image to activate links or to initiate scripts. For instance, the map of the United States below allows users to select a specific state to locate information relevant to that state.

Map of U.S. with text links Western Region - Dummy Link for Demo Purposes Pacific Region - Dummy Link for Demo Purposes Mid-Western Region - Dummy Link for Demo Purposes  Eastern Region - Dummy Link for Demo Purposes

Note that text links are also provided with the above server-side image map.

Image maps do not have to be "maps" in the geographic sense. Any image will do. For example, the National Highway Transportation Safety Board uses an image of an automobile dashboard, with various links associated with parts of the dashboard.

Client-side image maps v. server-side image maps.

The two principal types of image maps are client-side image maps and server-side image maps.  With a server-side image map, when a user clicks on a part of the map, the vertical and horizontal coordinates of the cursor location are transmitted back to the web page's server, which then calculates what region of the map those coordinates belong to and responds appropriately.  With the newer client-side type of image map, the user's browser determines which region the user has selected. Client-side image maps are generally more efficient because the web server is not involved in determining what a click on the map means.

More important for accessibility, with client-side image maps the browser can "know" what the various regions of the map mean, i.e. what link or script they activate, and can therefore pass this information to the user before the link or script is activated.  To make client-side image maps accessible, each region within the map can be assigned an alt description that can be read by a screen reader or other assistive technology device. The same cannot be said of server-side image maps. Server-side image maps must be accompanied by redundant text links. For instance, in the example above, the agency has made the image map accessible by providing a duplicate list of links - here, the names of states - for each of the areas identified in each region of the map.

To determine whether a web page includes client-side image maps, you can review the page's HTML source coding for any tags that begin with the word map. For instance, <MAP NAME="USMap">.

Server-side image maps are slightly more difficult to identify within the page's HTML source coding, because there are several tags that will send the horizontal and vertical coordinates of the cursor location back to the server.  Some indications that a web page includes a server-side image map are the presence of the ISMAP attribute in an image tag or a form input tag specifying a parameter of IMAGE.  If the HTML source code for the page includes tags of one of the following formats, then the page may include a server-side image map:

<IMG SRC="picture.jpg" ISMAP> or
<INPUT TYPE="image">

Because it is so much easier for client-side image maps to be made fully accessible to people with disabilities, the Access Board's final rule requires that agencies use client-side image maps instead of server-side image maps, except when the map regions cannot be defined with an available geometric shape.

W3C/WAI Guidance on Rule e

Techniques for WAI Checkpoint 1.2 (Provide redundant text links for each active region of a server-side image map).

W3C/WAI Guidance on Rule f

Techniques for Checkpoint 9.1 (Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape).

Department of Commerce Web Advisory Council (WAC)
U.S. Department of Commerce

Send questions and comments about this page to WAC@doc.gov
Page last updated October 12, 2010