Do not use server-side image maps
Last updated:
How to fix this issue?
Remove the ismap attribute from <img> elements. Replace server-side image maps with one of these accessible alternatives:
server-side image map
<a href="/map-handler">
<img src="map.png" ismap alt="Product categories" />
</a>
Use a client-side image map with <map> and <area> elements instead:
client-side image map
<img src="map.png" alt="Product categories" usemap="#category-map" />
<map name="category-map">
<area shape="rect" coords="0,0,100,100" href="/electronics" alt="Electronics" />
<area shape="rect" coords="100,0,200,100" href="/clothing" alt="Clothing" />
</map>
Or replace the image map with regular links or buttons arranged visually to match the design:
regular links
<nav aria-label="Product categories">
<a href="/electronics">Electronics</a>
<a href="/clothing">Clothing</a>
</nav>
Why is this important?
A server-side image map requires a pointing device to determine which area was clicked. Keyboard users cannot activate areas of a server-side image map. This makes the navigation completely inaccessible to people with motor disabilities or anyone using a keyboard.
More info:
Rule info
Standard
Regulations
User impact
Minor impact Minor inconvenience for some users. Fix as time allows. Critical : blocks access entirely Serious : significantly hinders use Moderate : causes difficulty Minor : minimal disruptionFix complexity
High level of required technical expertise To resolve this issue, you need technical expertise in software engineering. Resolving this issue requires modifying the software code, for which you need a background in software engineering.Affects
Free Website Accessibility Audit