Accessibility Insights

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