Server-side image maps need a keyboard alternative

• Rule: axe/server-side-image-map
• Checks: Server-side image maps must not be used
• WCAG: 2.1.1
• Fix class: manual: A fix needs a person to work out what to change, beyond authored text or a visual decision.

Who it affects

• People who use a keyboard or a switch device instead of a mouse.
• People who use a screen reader or a braille display, most of them blind.

How to fix it

An <img ismap> sends the click position to the server

Replace it with a client-side image map, whose <area> elements are links with their own alt, or with plain text links. Then remove ismap and the link around the image.

<img src="regions.png" alt="Sales regions" usemap="#regions">
<map name="regions">
  <area shape="rect" coords="0,0,150,100" href="/regions/north" alt="North region">
  <area shape="rect" coords="0,100,150,200" href="/regions/south" alt="South region">
</map>

Every destination is also offered as a text link

Check that each place the map leads to has its own text link near the map. If so, keyboard users have an equivalent and nothing needs to change.

Fixes that fail

Relying on the link around the image being focusable

A keyboard can focus the link and press Enter, but it cannot choose a point on the image, so the server gets no useful position.

More on the rule

axe-core’s documentation of the rule

CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.