Image map areas must have alternate text for links and the image

Image map areas must include alternate text for each link and the image

Every clickable area in a client‑side image map needs an accessible name, and the <img> that references the map must also have alt text. This affects navigation maps, diagrams, floor plans, charts, and any image with multiple hotspots. Users of screen readers, voice control, and some low‑vision users rely on these names to understand and use the links.

Why It Matters

Assistive technologies cannot infer meaning from pixels. Without alternate text, links inside image maps are unnamed, and users may only hear a filename or a generic “link.” That blocks navigation and context.

Keyboard users also need client‑side image maps; server‑side maps depend on pointer coordinates and typically break keyboard access. On touch devices, unnamed regions are not announced by screen readers, making activation guesswork.

Common Causes

• <area> elements missing alt, aria-label, or aria-labelledby
• The <img> using usemap lacks an informative alt
• Use of server‑side image maps (ismap) instead of client‑side maps
• Generic or vague area labels (e.g., “link1” or “click here”)
• Tiny hotspots that are hard to target on touch screens
• JavaScript-only handlers without proper href on <area>

How to Fix

1. Use a client‑side image map
   • Reference the map from the image: <img usemap="#map-id"> and define <map name="map-id">.
2. Provide context on the image
   • Give the <img> a concise alt that explains the overall purpose (e.g., “Campus locations navigation”). Do not leave it empty if the image presents multiple interactive destinations.
3. Name every hotspot
   • For each <area> with href, include a meaningful alt that states the destination or action (e.g., “Library”).
   • If you cannot use alt, aria-label or aria-labelledby on <area> is acceptable, but prefer alt when possible.
4. Ensure keyboard and AT support
   • Keep real href targets on <area> (avoid javascript:). Activation should work with Enter.
   • Provide a nearby text link list mirroring the hotspots, so focus visibility and redundancy are covered.
5. Avoid server‑side image maps
   • Do not use ismap. They rely on pointer coordinates and typically fail for keyboard and some AT.
6. Provide usable target sizes (WCAG 2.2)
   • Recommendation: make tappable regions at least 24 by 24 CSS pixels. Increase hotspot bounds or add transparent padding in the coordinates.

How to Test

Keyboard

• Tab through the page: each hotspot should receive focus in a logical order.
• Press Enter on each hotspot: the correct page loads.
• Verify there’s a visible focus indicator; if not, ensure a parallel text link list is present and focusable.

Screen reader

• With NVDA/JAWS/VoiceOver, navigate to the image: hear the image’s alt.
• Move through the links: each hotspot is announced with a clear name (no filenames, no “link” alone).
• Confirm the link list or landmarks reflect the same destinations.

Mobile/touch

• With VoiceOver or TalkBack, swipe through links: each hotspot is announced and actionable.
• Tap targets are easy to hit; approximate size ≥ 24×24 CSS px.

Code audit

• <img> includes usemap and meaningful alt.
• <map> name/id matches the usemap value.
• Each <area> with href has alt (or aria-label/aria-labelledby).
• No ismap present.

Good Example

<img src="/images/campus-map.png" alt="Campus locations navigation" usemap="#campus-map" width="800" height="450">
<map name="campus-map" id="campus-map">
  <area shape="rect" coords="40,60,200,130" href="/admissions" alt="Admissions">
  <area shape="circle" coords="420,200,45" href="/library" alt="Library">
  <area shape="poly" coords="600,300,720,300,740,360,610,360" href="/cafeteria" alt="Cafeteria">
</map>
<nav aria-label="Campus map links">
  <ul>
    <li><a href="/admissions">Admissions</a></li>
    <li><a href="/library">Library</a></li>
    <li><a href="/cafeteria">Cafeteria</a></li>
  </ul>
</nav>

Bad Example

<a href="/process-map">
  <img src="/img/site-map.png" ismap alt="">
</a>

• Uses a server‑side map (ismap) that depends on pointer coordinates.
• No named hotspots; keyboard and screen reader users lack link names.
• The image has empty alt, providing no context.

Quick Checklist

• <img> that uses a map has meaningful alt describing its purpose
• Every <area> with href has a clear, specific alt (or aria-label/labelledby)
• Client‑side image map only; never use ismap
• Hotspot names match the visible labels in the image
• Activation works with keyboard; Enter triggers each link
• Touch targets are roughly ≥ 24×24 CSS px
• Provide a nearby text link list mirroring the hotspots
• No generic labels (avoid “link”, “click here”, “more”)