facebook google plus twitter
Webucator's Free Web Accessibility and Section 508 Tutorial

Lesson: Accessible Image Maps

Welcome to our free Web Accessibility and Section 508 tutorial. This tutorial is based on Webucator's Web Accessibility and Section 508 Training for Experienced Web Designers course.

We mentioned image maps briefly in an earlier lesson of this course when we were talking about adding alternative text to images. In this lesson we will discuss in more detail how image maps work and how to make them accessible.

Lesson Goals

  • About image maps.
  • How to create accessible client-side image maps.
  • About server-side image maps.

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 the user clicks on the image.

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.World map from Dell.com

More often, image maps are pictures of navigation items such as this example from the Sun Microsystems Web site: Navigation banner from sun.com

Here's another navigation map at the King Co., Washington, site: Navigation bar which is a server side map

Here is another interesting image map which is on the home page of the web site of the Target stores. 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." Screenshot image map on Target.com

Accessible Image Maps

  • Two kinds of image maps
    • Client-side
    • Server-side
  • Section 508 requires that "Client-side image maps shall be provided instead of server-side image maps except where regions cannot be defined with an available geometric shape.

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 browser (client) must figure out how to handle the result of a click on the image
  • Img elements with the usemap attribute whose value is the name of the map element
  • Shape and coord (coordinates) attributes define the region of each <area>
  • Three possible shapes:
    1. rect (for rectangle) - specify top-left and bottom-right corners
    2. circle - specify center point and radius
    3. poly (for polygon) - specify a series of points corresponding to the corners of the polygon

The image map is called "client-side" 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 <area>.

The following is a client-side image map from an earlier version of the U.S. Senate web site. The alt-text on the image that creates the map is alt="Quick List", and there are three hot spots.An image map from the US Senate site

Here is the code that makes the image in Figure 7-20 work 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 name of a map element. (Do not use the boolean ismap attribute; that specifies a server-side map.) In the US Senate example, the usemap attribute points to a map with name subnav. The map defines the areas (area elements) of the image map that are hotspots. In this example, there are four areas:

Code Sample:

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

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 <area>.

The shape and coord (coordinates) attributes define the region of each <area>. There are three possible shapes: rect for rectangle, circle, and 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 "69109921". Here are the first three of the 33 areas of the that map.

Code Sample:

<area shape="rect" coords="17,93,182,111"
		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 (see 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 the href of the area. So instead of listening to "Link 30 Minute Recipes, link Grocery Coupons and Specials, link Super 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= supertarget_home&ref=sc_iw_r_12_0."

In both the examples in this lesson the alt-text on the image itself was chosen to be text in the image which acts as a heading, alt="In the 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 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, use alt="".

Server-Side Image Maps

  • No usemap attribute
  • Image is enclosed in an anchor tag <a> and the img element has the boolean ismap attribute
  • Inaccessible to users who cannot use a mouse
  • Guideline 2.1 of WCAG states, "Make all functionality operable via a keyboard interface."
    • Provide equivalent text links for all hot spots of your server-side map

The following shows another image map from King County that is fundamentally different from the previous examples, though not in appearance. King County image map

The image above was coded as a server-side image map on the King County web site. Here is the elided code.

Code Sample:

<a href= "wwwnav.map"> <img src="... navbar.gif" border="0" ismap="ismap" alt="King County Navigation Bar (text navigation at bottom)">

What makes this a "server-side" image map is that there is no usemap attribute; instead, the image itself is enclosed in an anchor tag (<a>) and the img element has the boolean ismap attribute. 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 href 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 a server-side map, tells the user to find "text navigation at bottom". That's good!

There is no good 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 acceptable as 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 it gets to the heart of the matter. 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)

(As of this writing, 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.Client side image map

Complex Client-Side Image Maps

  • Any region of a finite image can be defined by one of the available geometric patterns of a client-side map.

As mentioned earlier, client-side maps provide three shapes to describe regions: rectangles (shape="rect"), circles (shape="circle"), 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.A US map whidh is a client-side image map

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:

Code Sample:

<area shape=poly
 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 probably 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.

Image Map Accessibility

Duration: 15 to 25 minutes.

In this exercise, you will improve the accessibility of image maps.

  1. Open the file /AccessibleImagemaps/Exercises/exercise1.htm.
  2. Add features necessary for image maps to be accessible.
  3. Save your work.
  4. Compare with the file /AccessibleImagemaps/Solutions/solution1.htm.