Active <area> elements must have alternate text
An image map is a single image with many clickable areas. Like all images, an image map must have alternate text for each of the different clickable areas, as well as for the larger image itself, since screen readers have no way of translating graphics into text.
The Algorithm, in Simple Terms
<area> elements of image maps to ensure that they have an alternative text.
Why this is Important
Screen readers have no way of translating graphics into words. It is therefore important that all images, including image maps, have
If no alternate text is supplied, the screen reader will typically announce the filename of the image. This usually is not very helpful to the user and thus should be avoided.
How to Fix the Problem
Ensure that each clickable
<area> within an image map has an
aria-labelledby attribute that describes the purpose of the link.
<img> elements with
usemap attributes signify image maps that use a set of
<map> tags that enclose clickable hotspots defined with
area attributes. For each area, an additional
alt attribute is needed to define alternate text. This can be done as follows:
<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"> Remaining hotspots in image map... </map>
Don't use server-side image maps because they rely on mouse click coordinates, are not keyboard accessible, and do not allow text alternatives to the actionable areas.
<a href="/maps/nav.map"><img src="/images/navbar.gif" ismap></a>
- HTML 4