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.
Why it Matters
Screen readers have no way of translating images into words. It is important that all images, including image maps, have
alt text values.
Screen readers typically announce the filename of the image if alternative text is missing. Filenames do not adequately describe images and are not helpful to screen reader users.
How to Fix the Problem
Ensure each clickable
<area> within an image map has an
aria-labelledby attribute value that describes the purpose of the link.
<img> elements with
usemap attribute values identify image maps that use a set of
<map> tags enclosing clickable hotspots defined by
area attribute values. An additional
alt attribute is required to define alternate text for each
<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 that rely on mouse click coordinates. These maps are not keyboard accessible, and do not provide text alternatives to the actionable areas of the image map.
<a href="/maps/nav.map"><img src="/images/navbar.gif" ismap></a>
The Algorithm (in simple terms)
area elements of image maps have alternate text.