probeo

How to replace a server-side image map?

server-side-image-map page

The issue

A server-side image map can only be used with a mouse. Its links exist only as regions of an image, so a keyboard user can’t tab to them and a screen reader can’t list them. Whatever the map leads to, a floor plan, a store locator or a diagram, is out of reach for anyone not pointing and clicking.

The cause is the ismap attribute. It tells the browser to send the coordinates of a click to the server, which decides where to go. The page itself never says what the regions are, so nothing but a pointer can choose one. WCAG 2.1.1 requires everything on a page to work from a keyboard.

Scope

Every visible <img> with an ismap attribute is reported, whatever its value. Images hidden with hidden, aria-hidden="true", or an inline display: none or visibility: hidden, on the image or an ancestor, are skipped.

How to check you have it

  • In probeo: the page reports server-side-image-map, “Server-side image maps must not be used”, with minor impact, on each such image.
  • By hand: view the page source and search for ismap. Any match inside an <img> is the problem.
  • With a tool: axe DevTools reports the same rule by the same name.

The fix

Replace the server-side map with a client-side image map or with ordinary links.

A client-side map uses <map> and <area> elements, each with its own href and alt, so every region is a real link a keyboard can reach and a screen reader can announce. Where the regions are few, a list of plain links next to the image is often clearer still.

<img src="campus.png" alt="Campus map" usemap="#campus">
<map name="campus">
  <area shape="rect" coords="0,0,120,80" href="/library/" alt="Library">
  <area shape="rect" coords="130,0,250,80" href="/admissions/" alt="Admissions">
</map>

Done when: no image carries ismap, every region has a link with a text alternative, and the check above comes back clean.

Do not

  • Do not keep the server-side map and add a text note asking keyboard users to use a mouse.
  • Do not create <area> elements without an alt, which swaps one missing name for another.
  • Do not remove the image’s own alt when you add the map.

FAQ

Is a client-side image map accessible?

It can be. Each <area> is a link, reachable by keyboard and listed by screen readers, as long as each one has an alt that names where it goes. The area-alt rule checks that.

Why does probeo rate this minor?

Server-side image maps are rare and the rule’s metadata marks it as minor impact. For the people it affects, though, the content behind the map is unreachable, so it is worth fixing wherever it appears.

Can a server-side map stay if the same links appear elsewhere on the page?

The rule still reports the ismap image. Offering the same destinations as plain links helps, but removing ismap is what clears it.

Which product detects this

Probeo checks this on every page of your site as part of Site Clarity. This page explains one instance; the product tells you every page that has it.