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 href="/media/locations.map">
<img src="/media/locations.png" ismap>
</a>
Pass
<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>
withismap
attribute does not exist