Ensures <area> Elements of Image Maps Have Alternate Text
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.
Why It Matters
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.
Fixing the Issue
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.
Good Code Example
<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
Bad Code Example
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.
Test Cases
For more examples, visit W3C’s GitHub’s ATC Rules library.