Images Rule

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. When someone clicks, the browser sends the x and y position of the click to the server, which decides where to go. That only works with a pointer. There is no way to reach the regions with a keyboard, no names to announce, and nothing for voice control to target. Replace it with a client-side map (map and area elements) or plain links.

WCAG 2.2 A 2.1.1 Keyboard

Websight reports this as Server-side image maps must not be used

Who it affects

Someone with a motor impairment who navigates by keyboard can tab to the museum floor plan but can only press Enter on it as a whole. There is no way to choose the Egyptian gallery rather than the cafe.

Someone using a screen reader hears a single link, perhaps named floor plan, with no indication that it contains several destinations.

Someone using a switch or head pointer cannot land a precise click on a small region and gets sent to the wrong page or nowhere.

Broken versus fixed

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

Broken

Press Tab: one link, Ground floor plan. Press Enter and the browser sends ?0,0 to the server. A keyboard user can never pick a gallery.

Fixed

Press Tab three times: Egyptian gallery, link; Textiles gallery, link; Cafe, link. Each region is reachable and named.

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">Ground floor. Click a gallery to see what is on.</p>
<a href="#plan"><img ismap width="300" height="90" alt="Ground floor plan" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='90'%3E%3Crect width='300' height='90' fill='%23f1ece2'/%3E%3Crect x='15' y='15' width='85' height='60' fill='%23c9a26b'/%3E%3Crect x='108' y='15' width='85' height='60' fill='%236b8fc9'/%3E%3Crect x='200' y='15' width='85' height='60' fill='%23a56bc9'/%3E%3C/svg%3E"></a>
Fixed
<style>body{font-family:system-ui;padding:16px;margin:0}img{display:block;border-radius:6px}</style>
<p style="margin:0 0 8px">Ground floor. Click a gallery to see what is on.</p>
<img usemap="#plan" width="300" height="90" alt="Ground floor plan with three galleries" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='90'%3E%3Crect width='300' height='90' fill='%23f1ece2'/%3E%3Crect x='15' y='15' width='85' height='60' fill='%23c9a26b'/%3E%3Crect x='108' y='15' width='85' height='60' fill='%236b8fc9'/%3E%3Crect x='200' y='15' width='85' height='60' fill='%23a56bc9'/%3E%3C/svg%3E">
<map name="plan">
  <area shape="rect" coords="15,15,100,75" href="#egypt" alt="Egyptian gallery">
  <area shape="rect" coords="108,15,193,75" href="#textiles" alt="Textiles gallery">
  <area shape="rect" coords="200,15,285,75" href="#cafe" alt="Cafe">
</map>

Test it by hand in two minutes

  1. In DevTools, search the Elements panel for ismap. Any img carrying that attribute inside a link is a server-side map.
  2. Click into the page and press Tab until the image has focus, then press Enter. If the address bar gains something like ?0,0 and the page that loads is a default or error, the regions were never reachable.
  3. Try to reach each clickable region of the picture with the keyboard alone. If you cannot, it fails.
  4. After the fix, repeat the Tab test and confirm each region takes focus in turn and is announced by name with VoiceOver (Cmd+F5) or NVDA.

The fix

Before
<a href="/plan"><img src="floor-plan.png" ismap alt="Ground floor plan"></a>
After
<img src="floor-plan.png" usemap="#plan" alt="Ground floor plan with three galleries">
<map name="plan">
  <area shape="rect" coords="15,15,100,75" href="/egypt" alt="Egyptian gallery">
  <area shape="rect" coords="108,15,193,75" href="/textiles" alt="Textiles gallery">
</map>

Remove ismap and the wrapping link, then define each region as an area with its own href and alt. The browser handles the regions, so no server logic is needed.

Plain links instead of any map

Before
<a href="/plan"><img src="floor-plan.png" ismap alt="Ground floor plan"></a>
After
<img src="floor-plan.png" alt="Ground floor plan with three galleries">
<ul>
  <li><a href="/egypt">Egyptian gallery</a></li>
  <li><a href="/textiles">Textiles gallery</a></li>
</ul>

Keep the picture for people who like it, and give everyone a list of links beneath it. This is the most robust option and works at any zoom level.

Common mistakes

  • Keeping ismap and adding a client-side usemap as well; the server-side behaviour still fires and axe still flags it.
  • Adding a text list of links on a separate page while leaving the map as the only route on this one.
  • Assuming the img alt is enough; it names the picture, not the regions inside it.
  • Replacing the map with a client-side one but leaving the area elements without alt text.

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 img with the ismap attribute inside a link, which is the whole check. It cannot tell whether an equivalent set of keyboard-reachable links exists elsewhere on the page, so if you have added them it will still report the map until ismap is removed. 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 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. A Images must have alternative text image-alt Every img element needs an alt attribute. 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 Give people a way to skip past repeated navigation bypass Most pages start with the same header and menu.

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.