Stellt sicher, dass <area>-Elemente von Image-Maps alternativen Text haben
Die WCAG verlangt, dass alle <area>-Elemente von Image-Maps alternativen Text haben.
Eine Image-Map ist ein einzelnes Bild mit mehreren anklickbaren Bereichen. Wie bei allgemeinen Bildern auf einer Website muss jeder anklickbare Bereich einer Image-Map alternativen Text haben. Diese Regel gilt jedoch auch für das übergeordnete Bild selbst.
Warum es wichtig ist
Ohne Unterstützung können Screenreader Bilder nicht in Worte für Benutzer übersetzen, weshalb Alt-Text wichtig ist.
Wenn einem Bild kein alternativer Text hinzugefügt wird, liest ein Screenreader stattdessen den Dateinamen vor, was ein Bild ineffektiv beschreibt.
Behebung des Problems
Stellen Sie sicher, dass jedes anklickbare <area>-Element innerhalb einer Image-Map ein alt-, aria-label- oder aria-labelledby-Attribut hat. Dieser Wert sollte den Zweck des Links klar beschreiben.
<img>-Elemente mit usemap-Attributen werden normalerweise zu Image-Maps hinzugefügt, die eine Reihe von <map>-Tags verwenden. Diese Tags heben anklickbare Bereiche hervor, die durch area-Attributwerte definiert sind. Einzelne alt-Attribute sind erforderlich, um den alternativen Text für jeden dieser Bereiche anzugeben.
Gutes Codebeispiel
<img src="images/solar_system.jpg" alt="Sonnensystem" width="472" height="800" usemap="#Map"/>
<map name="Map">
<area shape="rect" coords="115,158,276,192" href="http://de.wikipedia.org/wiki/Merkur_(Planet)" alt="Merkur">
<area shape="rect" coords="115,193,276,234" href="http://de.wikipedia.org/wiki/Venus" alt="Venus">
<!-- Weitere Hotspots in der Image-Map... -->
</map>
Kopieren Schlechtes Codebeispiel
Dieser Code verwendet serverseitige Image-Maps, die auf Mausklicks angewiesen sind. Dies macht die Map nicht nur für Tastaturnutzer unzugänglich, sondern es wird auch kein alternativer Text für die aktiven Bereiche der Map bereitgestellt.
Testfälle
Weitere Beispiele finden Sie in der ATC-Regelbibliothek von W3C auf GitHub.