Ensure That Server-Side Image Maps Are Not Used

Yotam Flohr
Researcher
Blind Hearing Mobility
WCAG 2.1 Level A

Written and researched for humans by humans

Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments: 0
Your entire domain
Get detailed instructions on how to resolve every accessibility issue on your website

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

Code example
<a href="/maps/nav.map"><img src="/images/navbar.gif" ismap></a> Copy