Server-side image maps are not allowed

Server-side image maps must not be used

Do not use server-side image maps. They create a single link that relies on pointer coordinates and cannot be operated from a keyboard. This pattern appears on image-based navigation and legacy templates and blocks keyboard and screen reader users on desktop and mobile.

Why It Matters

Server-side image maps expose only one link target. Keyboard users cannot reach distinct hotspots, so entire sections become unreachable.

Screen reader users hear one unlabeled or generic link instead of meaningful link names for each destination.

On touch devices and with screen magnification, precise clicking is difficult. Without discrete, focusable targets, people with motor or low-vision disabilities are excluded.

Relevant WCAG 2.2: 2.1.1 Keyboard, 1.1.1 Non-text Content (link labels), 2.4.4 Link Purpose.

Common Causes

• Using <img ismap> inside an anchor to send click coordinates to the server
• Old CMS components that still generate server-side maps
• Image-only navigation used as a shortcut for layout
• Unfamiliarity with client-side image maps and accessible alternatives
• Attempting to avoid responsive coordinate issues by offloading logic to the server

How to Fix

1. Replace server-side maps with client-side image maps:
   • Use <img usemap="#name"> with a matching <map name="name">.
   • Define each hotspot with an <area> element that has href and an accessible name using alt.
2. Provide meaningful link text:
   • Each <area> alt value must describe its destination (e.g., "Events calendar"), not coordinates or shapes.
3. Set the base image alt appropriately:
   • If the image provides no extra info beyond the links, set the <img> alt to an empty string ("").
   • If context is needed (e.g., "Map of campus buildings"), keep a short, helpful alt.
4. Ensure keyboard operability:
   • Each <area href> is focusable by default. Verify Tab/Shift+Tab move through all hotspots and Enter/Space activate them.
5. Meet touch target size (recommendation):
   • Aim for at least 24 × 24 CSS pixels per hotspot (WCAG 2.2 target size guidance). Increase region size or add spacing if needed.
6. Handle responsive layouts:
   • Keep coordinates in sync when images scale (use a reliable scaling script), or switch to an SVG with <a> regions, or provide an adjacent list of text links.
7. Always provide a fallback:
   • Include a visible list of equivalent text links near the image map so navigation remains available if the image fails or coordinates misalign.

How to Test

Keyboard

• Tab through the image: focus should move to each hotspot, not just one link.
• Activate each hotspot with Enter (and Space where supported).
• Confirm a visible focus indicator is present.

Screen reader

• With NVDA/JAWS/VoiceOver, navigate to the image map.
• Each hotspot is announced as a link with a clear name.
• The base image alt does not duplicate every link label.

Mobile/touch

• With TalkBack/VoiceOver, swipe through links; all hotspots are reachable and announced.
• Hotspots are large enough to tap without precision.

Visual/responsive

• Resize the viewport or zoom. Hotspot activation still aligns with the intended regions.
• No server-side coordinate URLs (e.g., ?x=123&y=456) appear when activating links.

Good Example

<img src="/images/campus-map.jpg" alt="" usemap="#campus-map">
<map name="campus-map">
  <area shape="rect" coords="20,20,170,90" href="/library" alt="Library">
  <area shape="circle" coords="260,60,40" href="/cafeteria" alt="Cafeteria">
  <area shape="poly" coords="40,140,160,120,180,180,60,200" href="/auditorium" alt="Auditorium">
</map>

<!-- Optional text fallback -->
<nav aria-label="Campus links">
  <ul>
    <li><a href="/library">Library</a></li>
    <li><a href="/cafeteria">Cafeteria</a></li>
    <li><a href="/auditorium">Auditorium</a></li>
  </ul>
</nav>

Bad Example

<a href="/map-handler">
  <img src="/images/site-navigation.png" alt="Site navigation" ismap>
</a>

Quick Checklist

• No <img ismap> patterns remain anywhere on the site
• Client-side image maps use <img usemap> + <map> + <area href>
• Each <area> has clear, unique alt text describing its destination
• Base image alt is empty if it adds no value beyond the links
• All hotspots are reachable and operable with a keyboard
• Hotspots are large enough for touch (target ~24 × 24 CSS px)
• Coordinates remain accurate at different viewport sizes or a text fallback is provided