Alternatieve tekst voor image map areas

Hoe voeg je alternatieve tekst toe aan een area-element?

De voorkeursmethode is het alt-attribuut:

<map name="world-map">
  <area href="/nederland" alt="Nederland" shape="rect" coords="0,0,100,50" />
  <area href="/duitsland" alt="Duitsland" shape="rect" coords="100,0,200,50" />
  <area href="/frankrijk" alt="Frankrijk" shape="rect" coords="200,0,300,50" />
</map>
<img src="world-map.png" usemap="#world-map" alt="Kaart van Europa" />

Je kunt ook aria-label of aria-labelledby gebruiken in plaats van alt:

<!-- Met aria-label -->
<map name="world-map">
  <area href="/nederland" aria-label="Nederland" shape="rect" coords="0,0,100,50" />
  <area href="/duitsland" aria-label="Duitsland" shape="rect" coords="100,0,200,50" />
  <area href="/frankrijk" aria-label="Frankrijk" shape="rect" coords="200,0,300,50" />
</map>
<img src="world-map.png" usemap="#world-map" alt="Kaart van Europa" />

<!-- Met aria-labelledby om te verwijzen naar zichtbare tekst op de pagina -->
<p>Klik op een land: <span id="nl-label">Nederland</span>, <span id="de-label">Duitsland</span></p>
<map name="world-map">
  <area href="/nederland" aria-labelledby="nl-label" shape="rect" coords="0,0,100,50" />
  <area href="/duitsland" aria-labelledby="de-label" shape="rect" coords="100,0,200,50" />
</map>
<img src="world-map.png" usemap="#world-map" alt="Kaart van Europa" />

Waarom is dit belangrijk?

Met image maps kun je meerdere klikbare gebieden op één afbeelding definiëren. Screen readers lezen het alt-attribuut van elk <area>-element voor om gebruikers te vertellen waar een link naartoe leidt.

Zonder alternatieve tekst kunnen gebruikers van een screen reader het doel van de klikbare gebieden niet bepalen.