Accessibility for interactive images and image maps

An interactive image adds a layer of interaction on top of a static picture — clickable dots, popups, sometimes video or forms. Every one of those additions is invisible to a user who can't see the picture or can't operate a mouse, unless it's built with accessibility in mind from the start. That means keyboard operability, sensible alt text, ARIA relationships between hotspots and their content, and enough color contrast for markers to be visible in the first place.

The original HTML <map> and <area> elements have been around since the 1990s and technically support an alt attribute per area. In practice, they fall short of modern accessibility expectations in several ways:

Our HTML image map alternative guide covers the broader technical case for moving away from <map>/<area>; accessibility is one of the strongest reasons.

• Build each hotspot as a real <button> or <a>, not a <div> with an onClick handler — this gets you keyboard focusability and correct semantics for free.
• Ensure Tab order moves through hotspots in a logical sequence, generally matching reading order (left-to-right, top-to-bottom) rather than DOM insertion order if they differ.
• Support both Enter and Space to open a popup, matching native button behavior.
• Support Escape to close an open popup and return focus to the hotspot that opened it.

A keyboard user needs to see where focus is at all times. Don't remove the default focus outline without replacing it with something equally visible — a 2px outline with sufficient contrast against both light and dark parts of the underlying photo works well. Because hotspots sit on top of photographic content with unpredictable colors, a focus ring with its own contrasting background (a small halo or shadow) tends to hold up better than a simple outline color.

Hotspot markers themselves should meet the same 3:1 contrast ratio WCAG requires for other non-text UI elements against their immediate background, which sometimes means adding a subtle shadow or ring around a marker placed on a busy or low-contrast area of the image.

Give the base image itself a concise alt attribute describing the overall scene, exactly as you would for any other content image. Then give each hotspot its own accessible name — via visible text, anaria-label, or aria-labelledby — that describes what it reveals rather than just its position. "Hotspot 3" tells a screen reader user nothing useful; "Living room details" or "Wireless earbuds, $59" does.

When a hotspot opens a popup, use aria-expanded on the trigger and aria-controls pointing at the popup's id, so assistive technology can announce the relationship and current state.

WCAG 2.2's target size success criterion recommends a minimum of 24 by 24 CSS pixels for interactive targets, with more generous sizing preferred, especially on touch devices where fingers are far less precise than a mouse cursor. A small visual dot marker can still have a much larger invisible tap area around it — this keeps the design clean while making hotspots easy to hit for users with motor impairments or anyone using a phone one-handed.

1. Unplug your mouse and try to reach and activate every hotspot using only Tab, Shift+Tab, Enter, Space, and Escape.
2. Turn on a screen reader (VoiceOver, NVDA, or JAWS) and confirm each hotspot announces a meaningful name and its expanded/collapsed state.
3. Zoom your browser to 200% and confirm hotspots still land on their intended targets and popups remain readable.
4. Check color contrast of markers and text using a contrast checker against the actual image background, not just a neutral swatch.

For more on building interactive images the right way from the start, see our step-by-step guide to making an interactive image and browse real examples, or read a general primer on what an interactive image is.