Ensure That Server-Side Image Maps Are Not Used

WCAG indicates that server-side image maps should never be used.

Why It Matters

Server-side image maps are not keyboard accessible, which can isolate some users.

Server-side image maps pass the coordinates of the mouse click to the server-side script used to process the image map, whereas client-side image maps are keyboard accessible.

Fixing the Issue

Change all server-side image maps to client-side image maps.

Good Code Example

A client-side image map is contained by an <img> element. They have a usemap attribute containing the name of the image map (i.e. <img usemap=”myImageMap” src=”…” >). After the <img> element, a set of <map> elements encloses the space where clickable hotspots are defined on the map as follows:

Code example

<img src="images/solar_system.jpg" alt="Solar System" width="472" height="800" usemap="#Map"/>
<map name="Map">
<area shape="rect" coords="115,158,276,192" href="http://en.wikipedia.org/wiki/Mercury_%28planet%29" alt="Mercury">
<area shape="rect" coords="115,193,276,234" href="http://en.wikipedia.org/wiki/Venus" alt="Venus">
Remaining hotspots in image map...
</map>

Copy

Bad Code Example