Server-side image map

(Referring UWEM Test: 9.1_HTML_01)

Test info

Failure cause

The inspected image is used as server-side image map

You used a server side image-map using the ismap attribute.

Why this may be a barrier

Server-side image maps do not support alternative text for each active region, which means that they can't be used on non-graphic user-agents.
Furthermore server-side image maps depend on mouse-interaction, which makes them unusable for people who use a keyboard to interact with the web site.

Good Example

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head><title>Sample: Page with CLIENT SIDE IMAGE-MAP</title></head>
<body>

<img src="eGovMon_Logo.gif" alt="eGovMon – eGovernmant Monitor" usemap="eGovMon-map">
<map name="eGovMon-map">
<area shape="rect" coords="1,1,20,20" href="http://ws.egovmon.no/" alt="eGovMon Project Webpage"/>
<area shape="rect" coords="20,1,40,20" href="http://egovmonet.eu/” alt="eGovMon Network Webpage"/>
</map>

</body>
</html>

Solution

Use a client side image-map.

References

Related WCAG 1.0 Checkpoint

9.1

"Provide client-side image maps instead of serverside image maps except where the regions cannot be defined with an available geometric shape." [Priority 1]
WCAG 1.0 Checkpoint 9.1

Referring UWEM Test

9.1_HTML_01

This test is targeted to find server-side image maps.

Examples

  • Replacing a server side image map

    A server side image map can easily be replaced by a client side image map with translating the map values and adding alternative text to the image map regions.

    Bad example:
    <body>
    <a href="http://www.myregion.com/cgi-bin/imagemap.map">
    <img src="images/region.jpg" ismap alt="map of the region" width="500" heigth="300">
    </a>
    </body>
     
    The content of the map-file "http://www.myregion.com/cgi-bin/imagemap.map" could be the following: 
    default /main.html
    circle /lake.html 70,84,70,33
    rect /city.html 25,180,125,280
    poly /mountains.html 153,106,186,225,340,193,315,81,304,167
    Good example:
    <body>
    <img src="images/region.jpg" width="500" height="300" alt="map of the region" usemap="#mymap">
     
    <map name="mymap">
    <area shape="circle" coords="70,84,51" href="lake.html" alt="Lake Iris">
    <area shape="rect" coords="25,180,125,280" href="/city.html" alt="St. Valentin">
    <area shape="poly" coords="153,106,186,225,340,193,315,81,304,167" href="/mountains.html" alt="Mount Rockstone">
    <area shape="default" coords="0,0,500,300" href="/main.html" alt="The whole region">
    </map>
    </body>
    Questions, suggestions, objections? Give us feedback!
Questions, suggestions, objections? Give us feedback!
show exampleshow
hide examplehide