Back to Info and Examples for Accessibility Insights for Web

server-side-image-map

Server-side image maps must not be used.

Why it matters

Server-side image maps work by passing mouse click coordinates to a server-side script, which then determines what was clicked.

Because server-side image maps require the use of a mouse, they are not accessible to people who use keyboards (including people who use screen readers) or speech commands.

How to fix

Replace server-side image maps ( <img ismap> elements) with client-side image maps ( <img usemap> elements).

Example

Fail

A server-side image map requires users to select a business location using a mouse. This image map is unusable by people who use a keyboard or speech commands.

<a href="/media/locations.map">

<img src="/media/locations.png" ismap>

</a>

Pass

A client-side image map allows users to select a business location using a mouse, a keyboard, or a speech command.

<p>Select a business location to see our business hours:</p>

<img src="locations.png" width="800" height="400" alt="Map of business locations" usemap="#locations-map">

<map name="locations-map">

<area shape="rect" coords="0,0,200,400" alt="Corporate headquarters" href="location1.htm">

<area shape="rect" coords="0,0,400,400" alt="Elm Street store" href="location2.htm">

<area shape="rect" coords="0,0,600,400" alt="Maple Street store" href="location3.htm">

</map>

About this rule

This rule passes if:

<img> with ismap attribute does not exist

More examples

Understanding Success Criterion 2.1.1: Keyboard