Images Rule

Image map areas must have alternative text area-alt

An image map lets one picture have several clickable regions, each defined by an area element with an href. Every area is a link, and like any link it needs a name. The name comes from the area's alt attribute. Leave it off and a screen reader announces each region as link, with nothing to say where it goes.

WCAG 2.2 A 2.4.4 Link Purpose (In Context) 4.1.2 Name, Role, Value

Websight reports this as Active <area> elements must have alternative text

Who it affects

Someone using a screen reader on a council website's town map tabs across four hotspots and hears link, link, link, link. They cannot tell which one is the recycling centre.

Someone using voice control says click car park but no area has that name, so the command fails and they have to find another route.

Someone navigating by the links list in their screen reader sees several entries with no text at all and has to open each one to find out where it goes.

Broken versus fixed

Both examples are live and rendered in a sandboxed frame. The broken one is deliberately broken.

Broken

Press Tab three times with a screen reader on: link, link, link. Three destinations, no names.

Fixed

Announced: North Road recycling centre, link. Then Town centre recycling point, link. Then Southfield tip, link.

Show the markup behind both examples
Broken
<style>body{font-family:system-ui;padding:16px;margin:0}img{display:block;border-radius:6px}</style>
<p style="margin:0 0 8px">Recycling sites in Brackley. Click a site for opening times.</p>
<img usemap="#sites" width="300" height="90" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='90'%3E%3Crect width='300' height='90' fill='%23e7efe3'/%3E%3Crect x='20' y='20' width='70' height='50' rx='6' fill='%232a8f4a'/%3E%3Crect x='115' y='20' width='70' height='50' rx='6' fill='%231e5aa8'/%3E%3Crect x='210' y='20' width='70' height='50' rx='6' fill='%23b04a2a'/%3E%3C/svg%3E">
<map name="sites">
  <area shape="rect" coords="20,20,90,70" href="#north">
  <area shape="rect" coords="115,20,185,70" href="#central">
  <area shape="rect" coords="210,20,280,70" href="#south">
</map>
Fixed
<style>body{font-family:system-ui;padding:16px;margin:0}img{display:block;border-radius:6px}</style>
<p style="margin:0 0 8px">Recycling sites in Brackley. Click a site for opening times.</p>
<img usemap="#sites" alt="Map of three recycling sites" width="300" height="90" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='90'%3E%3Crect width='300' height='90' fill='%23e7efe3'/%3E%3Crect x='20' y='20' width='70' height='50' rx='6' fill='%232a8f4a'/%3E%3Crect x='115' y='20' width='70' height='50' rx='6' fill='%231e5aa8'/%3E%3Crect x='210' y='20' width='70' height='50' rx='6' fill='%23b04a2a'/%3E%3C/svg%3E">
<map name="sites">
  <area shape="rect" coords="20,20,90,70" href="#north" alt="North Road recycling centre">
  <area shape="rect" coords="115,20,185,70" href="#central" alt="Town centre recycling point">
  <area shape="rect" coords="210,20,280,70" href="#south" alt="Southfield tip">
</map>

Test it by hand in two minutes

  1. In DevTools, search the Elements panel for <area. Every area that has an href should also have an alt with a few words naming the destination.
  2. Click into the page and press Tab repeatedly. Each hotspot should take focus in turn and, with VoiceOver (Cmd+F5) or NVDA on, be announced by name followed by link.
  3. Open the screen reader's links list (VoiceOver rotor, or NVDA Insert+F7) and confirm the hotspots appear with readable names rather than blanks.
  4. Check the img that uses the map has its own alt describing the whole picture, so the map has context before the regions are read.

The fix

Before
<map name="sites">
  <area shape="rect" coords="20,20,90,70" href="/north">
</map>
After
<map name="sites">
  <area shape="rect" coords="20,20,90,70" href="/north" alt="North Road recycling centre">
</map>

Write the alt as link text: where it goes, not what shape it is. Each area in the map should have a different alt.

Area with no href

Before
<area shape="circle" coords="50,50,20">
After
<area shape="circle" coords="50,50,20" alt="">

An area without an href is not a link. Give it an empty alt so it is skipped, or remove it.

Replace the image map with real links

Before
<img usemap="#nav" src="menu.png">
<map name="nav">
  <area coords="..." href="/opening-times">
</map>
After
<nav>
  <a href="/opening-times">Opening times</a>
</nav>

For navigation, a list of ordinary links is easier to use, resize and maintain than hotspots on a picture.

Common mistakes

  • Giving every area the same alt, such as alt="map area".
  • Putting the alt on the img only and assuming it covers the hotspots.
  • Using title on the area instead of alt; title is not a reliable name.
  • Writing the shape or coordinates as the name (alt="rect 1").
  • Forgetting that each area is a link in its own right and leaving it out of keyboard testing.

WCAG criteria this rule maps to

axe-core tags this rule as WCAG 2.2 level A. It is one of the checks for:

The scanner can see an area with an href that has no alt, aria-label or aria-labelledby. It cannot tell whether the alt text matches the place the area actually links to. Automated tools find only part of the accessibility problems on a page; a pass on this rule is not a pass on the criterion.

A Images must have alternative text image-alt Every img element needs an alt attribute. A Server-side image maps must not be used server-side-image-map A server-side image map is an img with the ismap attribute inside a link. A Links must have text a screen reader can announce link-name Every link needs text that a screen reader can announce and a voice control user can say. A Image buttons must have alternative text input-image-alt An input with type="image" is a submit button that looks like a picture, often a magnifying glass or an arrow.

Scan your own page for this and 63 other checks

Open any page in Chrome, click Websight, and get a score out of 100 with every issue explained and a draft fix snippet per element.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.