Server-Side Image Maps Must Not Be Used

Server-side image maps rely on mouse click coordinates to determine which action to perform. Because of this, they cannot be operated using a keyboard and do not expose meaningful interactive regions to assistive technologies.

This rule ensures that all interactive regions within images are keyboard accessible, perceivable, and properly described, which is not possible with server-side image maps.

WCAG Success Criteria Affected

Using server-side image maps commonly results in failures of:

• SC 2.1.1 Keyboard (Level A)
  Interactive content cannot be operated using a keyboard.
• SC 1.1.1 Non-text Content (Level A)
  Actionable regions cannot be given appropriate text alternatives.
• SC 4.1.2 Name, Role, Value (Level A)
  Interactive regions are not exposed programmatically to assistive technologies.

Because these failures occur at Level A, server-side image maps are fundamentally incompatible with WCAG conformance.

Why This Matters

Server-side image maps require a pointing device to function. When a user clicks on the image, the browser sends the x/y coordinates of the mouse click to a server-side script, which then determines the destination.

This interaction model creates multiple accessibility barriers:

• Keyboard users cannot activate hotspots
• Screen readers cannot identify or announce clickable regions
• No text alternatives can be associated with individual actions
• Users cannot discover available options without visual inspection

As a result, people who navigate using a keyboard or assistive technology are completely blocked from accessing the content.

How to Fix the Problem

All server-side image maps must be replaced with client-side image maps. Client-side image maps define interactive regions directly in HTML, allowing each clickable area to be:

• Focusable by keyboard
• Operable using standard navigation keys
• Exposed to assistive technologies
• Labelled with text alternatives

Incorrect Markup (Server-Side Image Map)

Server-side image maps use the ismap attribute and rely on server-side processing.

<a href="/maps/nav.map">
  <img src="/images/navbar.gif" ismap>
</a>

This pattern is not keyboard accessible and does not allow individual hotspots to be described or focused.

Correct Markup (Client-Side Image Map)

Client-side image maps associate clickable regions with an <img> element using the usemap attribute and define hotspots using <area> elements.

<img
  src="images/solar_system.jpg"
  alt="Solar System"
  width="472"
  height="800"
  usemap="#Map"
/>

<map name="Map">
  <area
    shape="rect"
    coords="115,158,276,192"
    href="http://en.wikipedia.org/wiki/Mercury_%28planet%29"
    alt="Mercury"
  >
  <area
    shape="rect"
    coords="115,193,276,234"
    href="http://en.wikipedia.org/wiki/Venus"
    alt="Venus"
  >
  <!-- Additional hotspots -->
</map>

Each <area> element:

• Receives keyboard focus
• Can be activated using Enter or Space
• Provides an accessible name via alt
• Is announced correctly by screen readers

Important Clarifications

• This rule applies only to server-side image maps, not all images with interactive regions.
• Client-side image maps are allowed only when each hotspot has a meaningful text alternative.
• Decorative images or images without interaction are not affected.
• Modern alternatives such as semantic HTML links, buttons, or SVG with accessible markup are often preferable to image maps altogether.

Rule Description

The document must not use server-side image maps.
All image-based interactive regions must be implemented using client-side techniques that support keyboard interaction and text alternatives.

The Algorithm

1. Identify images using the ismap attribute
2. Confirm whether click handling depends on server-side coordinates
3. If so, the image map is server-side
4. Server-side image maps always fail this rule

Wrapping Up

Server-side image maps are a legacy technique that cannot be made accessible. They block keyboard access, hide interactive options from assistive technologies, and prevent meaningful text alternatives. Replacing them with client-side image maps, or better yet, standard HTML controls, ensures that all users can perceive, navigate, and operate image-based content.

If an interaction depends on a mouse click location, it fails accessibility at the most basic level.