Server-side image maps must not be used.

Server-side image maps use the ismap attribute on an <img> element inside a link. When a user clicks the image, the browser sends the exact x,y coordinates of the click to the server, which then determines what action to take based on where the click landed. This mechanism is inaccessible to anyone who cannot point and click on a precise pixel location within the image.

Keyboard users navigate by pressing Tab and Enter. When a keyboard user activates a server-side image map link, the browser sends default coordinates (typically 0,0) because there is no mouse pointer position to report. The server has no way to distinguish between different regions of the image, so the user cannot access any of the distinct destinations the image map was designed to provide. The entire set of options collapses into a single, unpredictable action.

Screen reader users face the same problem. A screen reader cannot describe the clickable regions within a server-side image map because those regions are defined entirely on the server. There are no elements in the page markup that correspond to each region, so the screen reader has nothing to announce. The user is left with a single link and no information about the choices available.

Users of touch-based assistive technologies and alternative pointing devices can also be affected, since these tools may not generate the precise coordinate data the server expects.

This issue relates to WCAG 2.1.1 Keyboard (Level A), which requires that all functionality be operable through a keyboard interface. Because server-side image maps cannot be operated without a mouse or precise pointer, they fail this criterion.

How to fix it

The fix depends on the purpose of the image map:

If the image map links to distinct destinations based on regions of the image, replace it with a client-side image map. A client-side image map uses a <map> element containing <area> elements, each with its own href and alt text. The browser handles the coordinate mapping on the client side, and each <area> is a focusable, keyboard-accessible link with a text alternative that screen readers can announce.

If the image map is simple enough that it links to only a few destinations, consider replacing it entirely with individual linked images or buttons. This approach is often easier to maintain and produces a more straightforward experience for all users.

Examples

Server-side image map (inaccessible)

This example uses the ismap attribute to create a server-side image map. Keyboard and screen reader users cannot access individual regions.

<a href="/map-handler">
  <img src="navigation.png" ismap alt="Site navigation">
</a>

When a keyboard user presses Enter on this link, the browser sends a request like /map-handler?0,0, and the server cannot determine the user's intended destination.

Client-side image map (accessible)

This example replaces the server-side image map with a <map> and <area> elements. Each area is keyboard focusable and has descriptive alt text.

<img src="navigation.png" alt="Site navigation" usemap="#nav-map">
<map name="nav-map">
  <area shape="rect" coords="0,0,100,50" href="/products" alt="Products">
  <area shape="rect" coords="100,0,200,50" href="/about" alt="About us">
  <area shape="rect" coords="200,0,300,50" href="/contact" alt="Contact">
</map>

Each <area> element is a separate link that keyboard users can reach with Tab and activate with Enter. Screen readers announce each area's alt text, so users know where each link leads.

Separate linked images (accessible alternative)

When the number of destinations is small, individual links are simpler and easier to style responsively.

<nav aria-label="Site navigation">
  <a href="/products">
    <img src="products-icon.png" alt="Products">
  </a>
  <a href="/about">
    <img src="about-icon.png" alt="About us">
  </a>
  <a href="/contact">
    <img src="contact-icon.png" alt="Contact">
  </a>
</nav>

Each link is a standard anchor element, fully accessible to keyboard and screen reader users without any coordinate-based logic.

Learn more:

W3C Reference

Understanding WCAG 2.1: Non-text Content

→

W3C Reference

H24: Providing text alternatives for the area elements of image maps

→

MDN Reference

MDN: The Image Map element

→