# Server-side image maps must not be used

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/axe/4.11/server-side-image-map
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A server-side image map is created when an `<img>` element includes the `ismap` attribute inside an `<a>` element. When a user clicks the image, the browser sends the x and y coordinates of the click to the server, which then determines what action to take. This approach has two critical accessibility failures:

1. **No keyboard access.** Because the interaction depends on mouse coordinates, there is no way for keyboard-only users to activate specific regions of the map. Keyboard users cannot generate coordinate-based clicks, so every link within the image map becomes unreachable.

2. **No text alternatives for individual regions.** Screen readers cannot identify or announce the distinct clickable areas within a server-side image map. Unlike client-side image maps, where each `<area>` element can have an `alt` attribute describing its purpose, server-side image maps offer no mechanism to label individual hotspots. This leaves blind and deafblind users unable to understand or interact with the content.

Users with mobility impairments who rely on switch devices or other keyboard-based assistive technologies are also affected, as these tools cannot produce the precise mouse coordinates that server-side image maps require.

This rule relates to **WCAG 2.1 / 2.2 Success Criterion 2.1.1 (Keyboard)** at Level A, which requires that all functionality be operable through a keyboard interface. It also aligns with **Section 508 §1194.22(f)**, which explicitly states that client-side image maps must be provided instead of server-side image maps except where regions cannot be defined with an available geometric shape.

## How to Fix

Replace every server-side image map with a client-side image map:

1. Remove the `ismap` attribute from the `<img>` element.
2. Remove the wrapping `<a>` element (if it was only used for the server-side map).
3. Add a `usemap` attribute to the `<img>` element, referencing a `<map>` element by name.
4. Define each clickable region using `<area>` elements inside the `<map>`, specifying the `shape`, `coords`, `href`, and `alt` attributes for each one.
5. Ensure every `<area>` has a meaningful `alt` attribute describing the link destination.

## Examples

### Incorrect: Server-side image map

The `ismap` attribute makes this a server-side image map. Keyboard users cannot access the links, and no text alternatives exist for individual regions.

```html
<a href="/maps/nav.map">
  <img src="/images/navbar.gif" alt="Navigation bar" ismap>
</a>
```

### Correct: Client-side image map

Each clickable region is defined with an `<area>` element that has its own `alt` text and `href`. Keyboard users can tab through the areas, and screen readers can announce each link.

```html
<img
  src="/images/solar_system.jpg"
  alt="Solar System"
  width="472"
  height="800"
  usemap="#solar-system-map">

<map name="solar-system-map">
  <area
    shape="rect"
    coords="115,158,276,192"
    href="https://en.wikipedia.org/wiki/Mercury_(planet)"
    alt="Mercury">
  <area
    shape="rect"
    coords="115,193,276,234"
    href="https://en.wikipedia.org/wiki/Venus"
    alt="Venus">
  <area
    shape="rect"
    coords="115,235,276,280"
    href="https://en.wikipedia.org/wiki/Earth"
    alt="Earth">
</map>
```

### Correct: Simple navigation using a client-side image map

```html
<img
  src="/images/navbar.gif"
  alt="Site navigation"
  width="600"
  height="50"
  usemap="#nav-map">

<map name="nav-map">
  <area
    shape="rect"
    coords="0,0,150,50"
    href="/home"
    alt="Home">
  <area
    shape="rect"
    coords="150,0,300,50"
    href="/products"
    alt="Products">
  <area
    shape="rect"
    coords="300,0,450,50"
    href="/about"
    alt="About us">
  <area
    shape="rect"
    coords="450,0,600,50"
    href="/contact"
    alt="Contact">
</map>
```

In the client-side examples, each `<area>` is focusable via keyboard, has a descriptive `alt` attribute for screen readers, and links directly to its destination without requiring server-side coordinate processing. If your image map regions are complex and cannot be represented with the available `shape` values (`rect`, `circle`, `poly`), consider replacing the image map entirely with a set of individual links or buttons, which provide even better accessibility.