Alternative text for image map areas

How to add alternative text to an area element?

The preferred method is the alt attribute:

<map name="world-map">
  <area href="/netherlands" alt="Netherlands" shape="rect" coords="0,0,100,50" />
  <area href="/germany" alt="Germany" shape="rect" coords="100,0,200,50" />
  <area href="/france" alt="France" shape="rect" coords="200,0,300,50" />
</map>
<img src="world-map.png" usemap="#world-map" alt="Map of Europe" />

You can also use aria-label or aria-labelledby instead of alt:

<!-- Using aria-label -->
<map name="world-map">
  <area href="/netherlands" aria-label="Netherlands" shape="rect" coords="0,0,100,50" />
  <area href="/germany" aria-label="Germany" shape="rect" coords="100,0,200,50" />
  <area href="/france" aria-label="France" shape="rect" coords="200,0,300,50" />
</map>
<img src="world-map.png" usemap="#world-map" alt="Map of Europe" />

<!-- Using aria-labelledby to reference visible text on the page -->
<p>Click a country: <span id="nl-label">Netherlands</span>, <span id="de-label">Germany</span></p>
<map name="world-map">
  <area href="/netherlands" aria-labelledby="nl-label" shape="rect" coords="0,0,100,50" />
  <area href="/germany" aria-labelledby="de-label" shape="rect" coords="100,0,200,50" />
</map>
<img src="world-map.png" usemap="#world-map" alt="Map of Europe" />

Why is this important?

Image maps allow multiple clickable regions on a single image. Screen readers read the alt attribute of each <area> to tell users where each link leads.

Without alternative text, screen reader users cannot determine the destination or purpose of any area in the image map.