Rampsight

All rules

Text alternatives

Replace server-side image maps

Why it matters

A server-side map sends pixel coordinates to the server, so the destinations exist only as positions in a picture. There is nothing for a keyboard or a screen reader to work with.

How to fix it

  1. Replace ismap with a client-side <map> and <area> elements, each with alt text.
  2. Better still, replace the map with real links or buttons positioned over the image.

In markup

Fails
<a href="/map"><img src="offices.png" ismap></a>
Passes
<img src="offices.png" alt="Our offices" usemap="#offices">
<map name="offices">
  <area shape="rect" coords="0,0,60,40" href="/berlin" alt="Berlin">
</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 server-side-image-map (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.