Digital Accessibility Knowledge Base

server-side-image-map

Server-side image maps must not be used

Who might be affected
Screen Reader
Voice Control
Keyboard

Description

Server-side image maps, unlike client-side image maps, do not contain hotspots (e.g. <area>). Clicking on a server-side image map will send the coordinates of the click location in the query-string to be processed on the server. This method makes it possible to interact with these maps only by direct pointing methods (e.g. mouse) and is therefore not accessible to keyboard users.

Quick Fixes

Generate image maps only on the client side.
1✓   <map name="map">
2        <area shape="rect" coords="50,100,150,200"
3            href="https://path/to/url"
4            alt="box" />
5

6        <area shape="circle" coords="50,210,50"
7            href="https://path/to/url/another"
8            alt="the link name" />
9

10    </map>
11

12✓   <img usemap="#map" src="./map.png" alt="a description of the map" />
Don't use the "ismap" attribute.
1    <a href="path/to/url">
2✗      <img src="./map.png" alt="a description of the map" ismap />
3    </a>

How Users Are Affected

Server-side image maps are dependent on the coordinates of click events, and therefore not accessible for keyboard users.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
2.1.1 Keyboard (A)