Avoid server-side image maps

WCAG 2.1.1
Keyboard

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

If clicking requires pixel coordinates, keyboard users are locked out.

Why this matters and how to fix it

Why this matters

Server-side image maps require users to click specific pixel coordinates to activate links. Keyboard and assistive technology users cannot target those coordinates, meaning they are unable to access or operate any of the linked areas. This creates a complete functional barrier.

How to fix this issue

Replace server-side image maps (using `ismap`) with client-side image maps (`usemap`) and `<area>` elements, each providing keyboard-focusable links with meaningful alternative text. If the interactive regions are complex, consider replacing the image with real HTML UI elements instead.

Automated detection · Manual review recommended

Developer guidance

Server-side image maps were common in legacy systems and CMS templates. Audit your templates or dashboards for `ismap`. Use <map> + <area> only if the content is simple and has clear, labeled regions. For complex hotspots, re-implement using positioned links or SVG with accessible <title>/<desc> labeling.

Code examples

Incorrect Implementation

<img ismap src="/map.png">

Correct Implementation

<img src="/map.png" usemap="#m">
<map name="m">
  <area href="/store" alt="Store location">
  <area href="/warehouse" alt="Warehouse location">
</map>

Real-World Examples

Before

<img ismap src="/floorplan.png">
<!-- Keyboard users cannot reach any navigation points -->

After

<img src="/floorplan.png" usemap="#floor-map">
<map name="floor-map">
  <area href="/conference-room" alt="Conference room">
  <area href="/lobby" alt="Lobby">
</map>

Manual testing

  1. 1. Search the page for `ismap` attributes.
  2. • If present → this rule fails automatically.
  3. 2. Use the Tab key to navigate the interactive regions.
  4. • Expected: Each region is a keyboard-focusable link.
  5. 3. Turn on a screen reader and move through links.
  6. • Expected: Each region has clear alt text describing its purpose.
  7. 4. If regions are visually complex, consider replacing the image entirely with HTML buttons or SVG with labeled groups.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance