Image Map Area Elements Need Alt Text: How to Fix It

What this check flags

This check fires when a client-side image map on your page contains one or more <area> elements that carry no alt attribute (or an empty one). The <area> is a real hyperlink, so an unlabeled one hands screen-reader users a clickable region they can hear exists but cannot identify. It maps to the axe-core area-alt rule and WCAG 2.1 Success Criterion 1.1.1 (Non-text Content), and it is one of the easier accessibility failures to close once you know where the map lives.

What a failing image map actually looks like

A client-side image map is three moving parts: an <img> with a usemap attribute, a <map> whose name matches, and a set of <area> hotspots inside it. Here is a floor-plan navigation graphic that trips the check on every hotspot:

<img src="/img/office-map.png" usemap="#floorplan" width="900" height="500">

<map name="floorplan">
  <area shape="rect" coords="0,0,300,500" href="/reception/">
  <area shape="rect" coords="300,0,600,500" href="/sales-floor/">
  <area shape="circle" coords="750,250,120" href="/server-room/">
</map>

Every <area> here is a link with no accessible name. A screen reader typically falls back to reading the href path or announcing an unlabeled "link," which tells the user nothing about where the hotspot leads. The fix is to name each region for what it does:

<img src="/img/office-map.png" usemap="#floorplan" width="900" height="500"
     alt="Interactive floor plan of the ground level">

<map name="floorplan">
  <area shape="rect" coords="0,0,300,500" href="/reception/"
        alt="Reception and visitor check-in">
  <area shape="rect" coords="300,0,600,500" href="/sales-floor/"
        alt="Sales floor">
  <area shape="circle" coords="750,250,120" href="/server-room/"
        alt="Server room">
</map>

Note two things. The parent <img> also needs its own alt describing the graphic as a whole, and each alt should describe the destination, not the shape. "Server room" is useful; "circle hotspot" is not.

What counts as a good area label

How to detect it on your own site

1. Screaming Frog. Crawl the site, then use Custom Search or Custom Extraction with an XPath such as //area[not(@alt)] to list every page that ships an unlabeled area. Because image maps are rare now, the hit list is usually short and specific.
2. axe DevTools / axe-core. Run the extension on any suspect page. The violation reports as "Active <area> elements must have alternate text" (rule id area-alt) and points at the exact node.
3. curl plus grep. For a quick one-off, pull the raw HTML and eyeball the map: curl -s https://example.com/page/ | grep -i "<area". If you see href without alt on the same tag, that is your failing hotspot.

How to fix it

1. Locate the <map> block in the template or content that owns the image.
2. Give every <area> that has an href an alt that names its destination in a few words.
3. Make sure the parent <img usemap> also has a meaningful alt for the graphic overall.
4. If a hotspot is decorative or duplicates an adjacent text link, you can use alt="" deliberately, but only when the link truly carries no unique information.
5. Re-scan with axe to confirm the rule clears, then check the page with a screen reader (VoiceOver or NVDA) and tab through the hotspots to hear the labels read back.

While you are in there, ask whether the image map still earns its place. Pixel-based coords do not scale on responsive layouts, so hotspots drift out of alignment on phones. A block of real <a> links, CSS-positioned overlays, or an SVG with linked shapes is easier to maintain and accessible by default. If you replace the map, this check disappears for good rather than being patched.

FAQ

Does an empty alt attribute pass the check?

Technically alt="" satisfies the parser, and axe will not flag a genuinely decorative area. But on a hotspot that goes somewhere useful, an empty alt is worse than a missing one because it deliberately hides the destination from assistive tech. Only use it when the link is redundant.

Can I use aria-label instead of alt on an area element?

Yes. An <area> with a valid aria-label or aria-labelledby is treated as having an accessible name, and axe accepts it. For a plain image map, alt is the simplest and most widely supported choice, so reach for ARIA only when you already have a labeling pattern in place.

Why does this only affect a handful of pages?

Image maps were a 2000s-era navigation pattern. Most sites have none, so this check tends to surface on a legacy page, an old infographic, or an imported template. That narrow footprint is good news: fixing or retiring one or two maps usually clears the entire report.

Is this the same problem as an ordinary image missing its alt text?

Related but not identical. A bare <img> without alt is the broader images need alt issue. This check is specifically about the clickable <area> hotspots inside a map, each of which is its own link and needs its own label.

How is this different from a server-side image map?

A client-side map (the kind here) can be made accessible by labeling each area. A server-side image map sends raw click coordinates to the server and cannot be labeled at all, which is why it should be replaced rather than patched.

For the underlying concept, see our glossary entry on the alt attribute, and for the broader pattern of unnamed interactive elements, links must have discernible text.