Rampsight

All rules

Text alternatives

Image map areas need alternative text

Why it matters

Each clickable area of an image map is a link. Without alt text a screen reader announces the destination URL, so a map of Europe becomes a list of file paths.

How to fix it

  1. Give every <area> an alt attribute naming where it leads, not what it looks like.
  2. Keep the wording consistent with the equivalent text links elsewhere on the page.
  3. If an area is not meant to be clickable, remove its href instead of leaving the alt empty.

In markup

Fails
<map name="europe">
  <area shape="rect" coords="0,0,60,40" href="/de">
</map>
Passes
<map name="europe">
  <area shape="rect" coords="0,0,60,40" href="/de" alt="Germany">
</map>

The requirement behind it

This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:

Further reading

Deque University on area-alt (opens in new tab)

Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.

Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.