A: Aktive < area>-Elemente müssen einen Alternativtext besitzen (WCAG 2.4.4 + 4.1.2)

• Bedeutung
• Auswirkung
• Empfehlung
• Beispiele

Stellt sicher, dass <area>-Elemente Alternativtexte besitzen.

Das bedeutet

Interaktive Bildbereiche (<area href="…">) in Client-Side-Imagemaps brauchen einen erkennbaren Namen. Ohne alt (oder zulässige, gleichwertige Benennung) wissen Screenreader & Co. nicht, wohin der Hotspot führt.

Auswirkung

Ziel und Zweck der Links bleiben unklar. Nutzerinnen und Nutzer mit Screenreader oder geringer Sehleistung verlieren Orientierung, brechen Vorgänge ab und es liegt ein WCAG-Verstoß (A/AA) vor.

Empfehlung

• Für jede aktive <area> einen präzisen alt-Text setzen (kurz, zielbeschreibend).
• Kein rein dekorativer Hotspot: Wenn ohne Funktion, href entfernen (nicht fokusierbar machen).
• aria-label nur ausnahmsweise nutzen; bevorzugt alt, da HTML-konform und weitestmöglich unterstützt.
• Bei mehreren Hotspots: einzigartige Alternativtexte verwenden; <img> selbst sinnvoll beschreiben.

Beispiele

Problematisch

<img src="standorte.png" usemap="#map" alt="Standorte">
<map name="map">
  <area shape="rect" coords="10,10,120,60" href="/berlin">        <!-- kein Name -->
  <area shape="circle" coords="200,80,40" href="/hamburg" alt="">  <!-- leerer Name -->
  <area shape="poly" coords="..." href="/muenchen" title="München"> <!-- title≠Name -->
</map>

Besser

<img src="standorte.png" usemap="#map" alt="Standorte in Deutschland">
<map name="map">
  <area shape="rect"   coords="10,10,120,60" href="/berlin"   alt="Filiale Berlin">
  <area shape="circle" coords="200,80,40"    href="/hamburg"  alt="Filiale Hamburg">
  <area shape="poly"   coords="..."          href="/muenchen" alt="Filiale München">
  <!-- Dekorativ? Dann ohne href (nicht interaktiv) -->
  <!-- <area shape="rect" coords="..." alt="Dekorativ"> -->
</map>