Ensure <area> elements of image maps have alternative text

When using an image map, ensure that each clickable <area> within the map has an alt, aria-label or aria-labelledby attribute to describe the purpose of the link. This ensures the map is accessible to screen readers and provides meaningful information about each link.

How to fix this issue?

An image map is identified by an element with a usemap attribute, pointing to a <map> tag that defines clickable hotspots using elements. Each <area> should include an alt attribute to describe its purpose.

<img src="images/solar_system.png" alt="Solar System" width="1272" height="980" usemap="#Map" />
<map name="Map">
    <area shape="rect" coords="116,158,276,192" href="https://en.wikipedia.org/wiki/Mercury_%28planet%29" alt="Mercury" />
    <area shape="rect" coords="116,193,276,234" href="https://en.wikipedia.org/wiki/Venus" alt="Venus" />
</map>

Why you should fix this accessibility issue

Screen readers cannot interpret or describe images visually. To make images, including image maps, accessible, it is crucial to provide meaningful alt text for each one.

When alt text is missing, screen readers often announce the image's filename instead. Filenames rarely provide a clear or useful description of the image, leaving screen reader users without meaningful context. Providing descriptive alt text ensures that all users, including those relying on assistive technologies can understand the purpose and content of the image.

Rule Description

An image map is a single image containing multiple clickable areas. To ensure accessibility, each clickable area within the image map must have descriptive alternative text.

Additionally, the larger image itself should include alternate text, as screen readers cannot interpret graphical content as text. Providing meaningful text descriptions ensures all users can understand and interact with the image map effectively.