Ensures <area> Elements of Image Maps Have Alternate Text
Blind
Low vision
Hearing
Mobility
WCAG 2.1 Level A
WCAG requires all area elements of image maps to have alternate text.
An image map is a single image that has multiple clickable areas. Like general images on a site, each clickable area of an image map must have alternate text. However, this rule also applies to the larger image itself.
Without assistance, screen readers cannot translate images into words for users, which is why alt text is important.
If alternative text is not added to an image, a screen reader will read out the file name instead, which doesn’t describe an image effectively.
Ensure that each clickable <area> element within an image map has an alt, aria-label or aria-labelledby attribute value. This value should clearly describe the purpose of a link.
<img> elements that have usemap attribute values are usually added to image maps that use a set of <map> tags. These tags highlight clickable areas that are defined by area attribute values. Individual alt attributes are required to highlight the alternate text for each of these areas.
<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>
Copy
This code uses server-side image maps that rely on mouse clicks. Not only does this make the map inaccessible to keyboard users, but no alternative text is provided for actionable areas of the map.
For more examples, visit W3C’s GitHub’s ATC Rules library.