Do not use server-side image maps

Last updated:

How to fix this issue?

Remove the ismap attribute from <img> elements. Replace server-side image maps with one of these accessible alternatives:

BAD:

server-side image map

<a href="/map-handler">
  <img src="map.png" ismap alt="Product categories" />
</a>

Use a client-side image map with <map> and <area> elements instead:

CORRECT:

client-side image map

<img src="map.png" alt="Product categories" usemap="#category-map" />
<map name="category-map">
  <area shape="rect" coords="0,0,100,100" href="/electronics" alt="Electronics" />
  <area shape="rect" coords="100,0,200,100" href="/clothing" alt="Clothing" />
</map>

Or replace the image map with regular links or buttons arranged visually to match the design:

CORRECT:

regular links

<nav aria-label="Product categories">
  <a href="/electronics">Electronics</a>
  <a href="/clothing">Clothing</a>
</nav>

Why is this important?

A server-side image map requires a pointing device to determine which area was clicked. Keyboard users cannot activate areas of a server-side image map. This makes the navigation completely inaccessible to people with motor disabilities or anyone using a keyboard.

More info:

WCAG 2.1.1 Keyboard.

Rule info

Standard

WCAG A SC 2.1.1

Regulations

Section 508 EN 301 549 RGAA EAA ADA AODA

User impact

Fix complexity

Affects

Was this article helpful?

Checkout the ExcellentWebCheck services

ExcellentWebCheck's goal is to improve the online user experience. The tools of ExcellentWebCheck help to detect and improve usability problems on your website.