Image Maps in HTML

An image map is an image divided into several regions, called "hot areas" or "hot spots," that cause some kind of event to occur when selected, such as going to a webpage or linking to a file. Image maps are classified as either "client-side" or "server-side." Client-side image maps rely on the user's browser to process the user's selection. With server-side image maps, the user's selection is sent to and processed by the server. Client-side maps are preferred and generally used; it is rare that a server-side map is needed.

Accessibility Issues of Image Maps

In most situations, image maps can be retrofitted for accessibility and it is recommended that the developer use client-side maps. This is because server-side image maps are activated when a mouse is used, but not all individuals use a mouse. Therefore, as defined in the Web Content Accessibility Guidelines, you need to "ensure each action associated with a visual region (of an image map) may be activated without a pointing device."

To make image maps accessible, you also need to have alternative text for each region of the image map. Without this alternative text, screen readers will read the the web address that the region points to; this can be especially frustrating with long URLs. Review the difference that the alternative text makes in how an image is read in the examples below.

Image map without alternative text

Listen to a screen reader accessing an image map without the alternative text (, 334 KB).
Or, read the transcript of a screen reader accessing an image map without the alternative text (, 1 KB).

Image map with alternative text

Listen to a screen reader accessing an image map with alternative text (, 483 KB)
Or, read a transcript of a screen reader accessing an image map with alternative text (, 1 KB)

Client-side Image Maps

Whenever possible, you should use a client-side image map. To create a client-side image map, you need an appropriate image. Then you will need to define the regions and their coordinates; this is generally done using a software program. MapEdit (Browse to website) is an image map editor program that is free for educational institutions and nonprofit organizations. It can be downloaded from the Internet and works with Windows, MacIntosh, and Java operating systems.

Sample Display of an Client-Side Image Map

[Yahoo] [Google] [Hotbot] [AltaVista]

In HTML, the regions of the image map are defined using the <MAP> and <AREA> tags and the image map is applied through the "usemap" attribute of the image tag (<IMG>).

Here is the code for the image map:
<IMG src="images/SearchEngine.jpg" alt="World's Most Boring Search Engine Image Map" usemap="#searchMap"> <MAP name="searchMap"> <AREA shape="rect" coords="2, 36, 173, 114" alt="Yahoo" href="http://www.yahoo.com"> <AREA shape="rect" coords="175, 36, 362, 114" alt="Google" href="http://www.google.com"> <AREA shape="rect" coords="2, 115, 173, 200" alt="Hotbot" href="http://www.hotbot.com"> <AREA shape="rect" coords="175, 115, 362, 200" alt="Alta Vista" href="http://www.altavista.com"> </MAP><BR> [<A href="http://www.yahoo.com">Yahoo</A>] [<A href="http://www.google.com">Google</A>] [<A href="http://www.hotbot.com">Hotbot</A>] [<A href="http://www.altavista.com">AltaVista</A>]<BR>

There are a couple of things to note about this example:

The alt attribute, "World's Most Boring Search Engine Image Map," is used to give a brief description to the region.
A second list of redundant hyperlinks separated by brackets have been presented to the user immediately below the image map.

Note: To ensure accessibility, links need to be separated by more than a space or a break to prevent older browsers from reading consecutive links as a single link. For this example, the brackets were used; however, there are numerous other ways to keep consecutive links separated.

Both techniques should be used consistently to improve image map accessibility.

Access Keys

For links that are commonly accessed and to increases accessibility, use the 'accesskey' attribute to associate a key to a link in image map. The code can be found below:

Google
<A href="http://www.google.com" accesskey="G">Google</A>

Using Internet Explorer, the user has direct access to this link by pressing ALT-G. They can then follow the link by pressing enter. Another example has been secretly hidden in this document. Press ALT-Y to see the example.

Server-side Image Maps

It is very difficult to find a situation where the developer would have to use a server-side image map. You may consider using a server-side image map when an active region cannot be represented by a geometric shape. However, even this could be handled in a client-side image map since a rough approximation to all 2-dimensional shapes can be accomplished by specifying the shape as 'poly', and supplying the coordinates that make up the polygon.

In the rare instance that a server-side image map is used, it is required to have redundant links for all regions in the map; without these the image map is unusable. There is also the option to create an alternate page. However, this is only recommended as a last resort; having two separate pages doubles the work in developing and maintaining a website.

General Guidelines for Working with Image Maps

Whenever possible. use client-side image maps over server-side image maps.
Use an appropriate image for your image map. Make sure colors have a high contrast, and that there are well-defined boundaries within the image.
Provide redundant links and alternative text for each region of the image map.
Try not to have small "hot regions" that are close in proximity. Some users with motor skill problems may find them difficult to navigate.
Provide keyboard shortcuts for frequently accessed links.

The next page will present additional resources on accessible HTML.

Previous Page
Page 14:
Plug-ins

Top of Page arrow up

Page 15

Page 16:
Resources