We mentioned image maps briefly in Section 2 of this course when we were talking about adding alternative text to images. In this section of the Web Accessibility Course we will in more detail into how Image maps work, and how to make them accessible.
Examples of Image Maps
An image map is a picture on a Web page that provides different links to other Web pages, depending on where a user clicks on the image. Image maps are often "real " maps such as the example in the screenshot below from the Dell support site (http://support.dell.com).
Image map at support.dell.com
More often, image maps are pictures of navigation items such as this example from the Sun Microsystems Web site (http://www.sun.com/):
Part of the image map at www.sun.com
Here's another navigation map (http://www.metrokc.gov/) at the King Co., Washington, site:
Image map at King Co. (WA) Site
Here is another interesting image map which is on the home page of the web site of the Target stores, http://target.com. This image (now with correct alt-text, "In the Spotlight") contains 33 clickable areas, corresponding to the text in the smallest font, like "30-Minute-Meal Recipes."
Screen shot of one image map on Target.com
Accessible Image Maps
There are two kinds of image maps: client-side and server-side. Client-side image maps are by far the most common type of image map to be found on the Web today. In fact, as we shall see, server-side image maps should be avoided.
Client-Side Image Maps
The image map is called
because the browser (the client) must figure out how to handle the result of a
click on the image. Any time there is a click on the page, the client (browser)
figures out whether or not the coordinates of that click fell inside one of the
regions specified as an
<area> of the client-side map. If the
click is inside one of those regions, then the browser opens the corresponding
URL—that is, the value of the
href for that
The following is a client-side image map from an earlier version of the U.S.
Senate web site (http://www.senate.gov/).
alt-text on the image that creates the map is
List" and there are three hot spots.
Navigation panel as client-side image map.
Here is the code that makes the image in Figure 7-20 as a client-side image map:
<img src="sidebar.gif" alt="Quick List" ... usemap="#subnav">
Client-side maps are
img elements with the
usemap attribute whose value is the
(Do not use the boolean
attribute; that specifies a server-side map.) In US Senate example, the
points to a
(area elements) of the image map that are hotspots. In the this example, there are
<map name="subnav"> <area shape="rect" coords="4,33,76,72" href="..." alt="Committee Hearing Schedule"> <area shape="rect" coords="5,78,88,117" href="..." alt="Yesterday's Senate Floor Activity"> <area shape="rect" coords="5,121,75,140" href=" ... " alt="Senate Art"> <area shape="rect" coords="5,143,59,172" href=" ... " alt="Senate History"> </map>
The four image map areas have
alt-text that is exactly the same as
the text in the image; this is perfect. The way that this client-side image map
works is that each
<area> specifies a region of the image in
which a click will open a certain URL, namely the
href of the
coord (coordinates) attributes define
the region of each
<area>. There are three possible shapes:
poly for polygon. The
coordinates are pixel coordinates measured from the top left of the image. For a
rectangle, the developer must specify the top-left and bottom-right corners. A
circle is given by the center point and radius. A polygon is specified by a
series of points corresponding to the corners of the polygon.
As another sample, the Target.com image above has a map intuitively named "
Here are the first three of the 33 areas of the that map.
<area shape="rect" coords="17,93,182,111" href="http://recipes.target.com/default.aspx?ref=sc_iw_r_12_0" alt="30 Minute Recipes"> <area shape="rect" coords="17,130,182,147" href="http://sites.target.com/site/en/supertarget/page.jsp?title= supertarget_coupons_specials_main&ref=sc_iw_r_12_0" alt="Grocery Coupons and Specials"> <area shape="rect" coords="17,148,182,164" href="http://sites.target.com/site/en/supertarget/page.jsp?title= supertarget_home&ref=sc_iw_r_12_0" alt="Super Target">
Before the Target Corporation was sued by the National Federation of the Blind (http://www.jimthatcher.com/law-target.htm)
these image map areas did not have alt-text. In fact there were over a hundred hotspots on
about a dozen image maps and none of the areas had alt-text. Screen readers try to find information to convey
to a blind user when active images (including areas) lack alt-text. In the case of image maps, that will be
href of the
area. So instead of listening to "Link 30 Minute Recipes link
Grocery Coupons and Specials, link Supper Target" when the alt-text has been added, a blind visitor instead
would hear "Link
default.aspx?ref=sc_iw_r_12_0 link /site/en/supertarget/page.jsp?title=
supertarget_coupons_specials_main&ref=sc_iw_r_12_0 link /site/en/supertarget/page.jsp?title=
In both the examples in this section the alt-text on the image itself was
chosen to be text in the image which acts as a heading,
spotlight" for the target sample, and
alt="Quick List" for the US Senate
image map. These images themselves are not active, so the alt-text (from the second section of this is course)
should convey the information in the image. These two examples are good illustrations of that idea.
Often for image maps, there is no information conveyed beyond the links, as
illustrated by the fragment from Sun Microsystems image map above. For these,
Server-Side Image Maps
The following shows another image map, from www.metrokc.gov/services.htm. It is fundamentally different from the previous examples though not in appearance.
Server-side image map for King County navigation bar.
The image above was coded as a server-side image map on the King County web site. Here is the elided code.
<a href= "wwwnav.map"> <img src="... navbar.gif" border="0" ismap="ismap" alt="King County Navigation Bar (text navigation at bottom)"> </a>
What makes this a server-side image map is that there is no
attribute; instead, the image itself is enclosed in an anchor tag (
img element has the boolean
That attribute tells the browser to send the coordinates of the user mouse click
directly to an associated map file on the server that is referenced by the
attribute of the anchor element. Without looking at the source code it is possible to detect a server-side map
because mouse coordinates are displayed in the status area of the browser as you move the mouse over the image.
For any person who cannot use the mouse, this is a fundamentally inaccessible
form of navigation because it requires positioning the mouse on some part of a
picture indicating a desired action (pressing Enter on a server-side
image map sends click coordinates
0,0 to the server).
The U.S. Access Board recognized the problem with server-side maps and recommends having redundant text links if you do use a server-side map, in this Section 508 provision:
§1194.22(e) Redundant text links shall be provided for each active region of a server-side image map.
WCAG 1.0 has the same requirement at Priority 1:
1.2 Provide redundant text links for each active region of a server-side image map.
Indeed, the King County site in Figure 7-21 has redundant text links at the
bottom of the homepage, and the
alt-text for the image itself which
is server-side map tells the user to find
text navigation at bottom
. That's good!
I can't see any reason why the King County site would use a server-side map for its main navigation. The equivalent text links at the bottom of the page make it accessible and compliant. The King County site, however, does not satisfy the second provision of the Section 508 rule on web accessibility:
§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.
The Section 508 provision is again almost identical to Checkpoint 9.1 of the WCAG:
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.
By either of these requirements, if you can't define a region with the existing geometric shapes, then a server-side map is OK - so long as redundant text links are provided. But all regions can be defined with a polygon or finite set of polygons, so server side maps are not allowed.
The new version of the Web Content Accessibility Guidelines (WCAG 2.0) doesn't even mention image maps, but gets to the heart of the matter - the fact that server side maps can't be used without a mouse.
Guideline 2.1 Make all functionality operable via a keyboard interface.
SC 2.1.1 All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. (Level A)
(When I copied this today, this success criterion was called "Bronze" instead of "Priority 1," or "Level 1," or "Level A." The current Summer 2007 draft of WCAG 2.0 uses Bronze, Silver and Gold, not for 3rd, 2nd, and 1st, but for Level 1, Level 2, and Level 3, respectively!)
If you have a server side map and a set of links that provide the same function, then that would satisfy 2.1.1, the functionality is operable through the keyboard interface, even if one particular object is not.
There is nothing about the regions in the King County image map that would make them difficult to define with available geometric shapes; simple rectangles would work just fine. In fact, the main navigation map on the homepage has been changed to a client-side image map, shown below.
The replacement client-side map on King County Site
Complex Client-Side Image Maps
As mentioned earlier, client-side maps provide three shapes to describe regions:
shape="rect"), circles (
and polygons (
shape="poly"). Effectively, any shape can
be described with a polygon or collection of polygons.
The following image is a good example of a client-side image map with rather complex hotspots, which are regions defined by polygons. It is was Microsoft's Local District Information Map but it is not on the site that I could find.
A complex client-side map - a stylized map of the USA, divided into regions
Using the Tab key, I moved the focus indicator in Internet Explorer to the upper Midwest area in the map above so that the focus polygon is visible. The source code for that area in the map uses a polygon determined by about 45 points:
<area shape=poly coords="173,7,181,9,180,10,227,9,232,10,233,12,238,11,244,12, 250,13,257,14,263,15,267,17,259,27,251,27,245,36,249,41,246,48, 254,53,256,57,257,61,258,66,262,68,263,73,264,75,263,77,262,78,260,78,259,80,258, 82,257,84,256,86,254,87,243,87,243,88, 229,88,229,92,207,92,206,90,186,90,184,85,173,82,170,45, 172,30,172,7,174,8" href="..." alt="Twin Cities: ND, MN, SD, NE, IA">
In principle, any region of a finite image can be defined by one of the available geometric patterns of a client-side map. In the worst case, individual areas could consist of individual pixels. But, as this image map illustrates, complex regions can be defined using polygons. There is no case where a server-side map is permitted under the Section 508 provision §1194.22(f) or WCAG Checkpoint 9.1. My interpretation of the Section 508 standards and WCAG 1.0 is that server-side maps are just not allowed, however with WCAG 2.0 and I assume the Section 508 rewrite in the works, both allow server-side maps if the function is available from the keyboard as in the King County server-side map above.
Even though it is hard to imagine, there may be cases where a designer wants every pixel to be a hotspot with different actions. You might argue that there are too many regions in this case. But that is a different issue than the one raised by provision §1194.22(f) and Checkpoint 9.1. A client-side image map still could be used.
Summary for Image Maps
The following points apply to accessible image maps:
- If you want to use an image map, make it a client-side image map.
alt-text for every
<map>, alt-text that conveys the function of that hotspot.
Use an appropriate text alternative on the image itself. If there is no information
beyond the hotspots then
- If you must use a server-side map, also include equivalent text links on the page for all hotspots of your server-side map (and please write to me explaining why you need to use a server-side map, because I would like to know).
If you have comments or questions on the content of this course, please contact Jim Thatcher.
This course was originally written for the Information Technology Technical Assistance and Training Center, funded in support of Section 508 by NIDRR and GSA at Georgia Institute of Technology, Center for Rehabilitation Technology. It has been completely revised.