5. 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. (580:F. W3C: 9.1 Priority 1)
6. Redundant text links shall be provided for each active region of a
server-side image map. (508:E. W3C: 1.2 Priority 1)
How do "image maps" work?
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." With client-side image
maps, each "active region" in a picture can be assigned its own "link" (called a URL or "Uniform Resource Locator") 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. By contrast, 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.
Server side image maps cannot, in most circumstances, provide the user with similar information. If you must use a server side image map, you must provide an
alternative way for users to navigate the links hidden in the image map.
Why is this provision necessary?
When a web page uses a server-side image map to present the user with a selection of options, browsers cannot indicate to the user the URL
that will be followed when a region of the map is activated.
Server side image maps are still important for applications like geographical information systems and mapping applications where each point (coordinate pair) is active. Designing a client side map with thousands of single pixel active regions would be very difficult. Therefore, the redundant text link is necessary to provide access to the page for anyone not able to see or accurately click on the map.
Server-side image maps (those using the ISMAP attribute in the IMG element) usually don't or can't provide any textual information about the links that are coded into them. If your server-side image map has hot-links to sections A, B, C, D and E of your site, then provide a text alternative on the page. For example, the code:
<a href="images/imgmap1.map">
<img ismap src="images/imgmap1.gif"
alt="Please use the following links instead of this imagemap." /></a><br />
[ <a href="a.htm">Section A</a> | <a href="b.htm">Section B</a> | <a href="c.htm">Section C</a> | <a href="d.htm">Section D</a> | <a href="e.htm">Section E</a> ]
produces the following server-side image map and text equivalent:
[ Section A | Section B | Section C | Section D | Section E ]
Note: the "alt" text you provide in the IMG element informs the users that a text equivalent exists -- but does not describe the image itself. If you want to describe the image map in detail, use "longdesc".
