Praxisleitfaden Klickbereiche in Image Maps
Klickbereiche einer Grafik beschriften
Geben Sie jedem verlinkten Bildbereich einen verständlichen Namen für sein Ziel.
area-altWCAG 2.4.4, 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-area-alt.html
Befund einordnen
Die Grafik hat einen Alt-Text. Ihr Link noch nicht.
Scanner-Signal
area-alt meldet map[name="envelope-map-221"] area: Dem verlinkten Bereich fehlt ein zugänglicher Name.
Technische Einordnung
- Regel
area-alt- Referenz
- WCAG 2.4.4, 4.1.2
Die Umschlagskizze heißt bereits „Historische Umschlagstanzung“. Ihre linke Hälfte ist jedoch ein eigener Link zur Überschrift der Archivprobe. Am zugehörigen area-Element fehlt sowohl alt als auch eine andere Namensquelle.
Bedeutung im Nutzungskontext
Wer die Grafik nicht sieht, kann das Ziel dieses Links nicht anhand seines Namens erkennen. Der Alt-Text des übergeordneten Bildes benennt den einzelnen Klickbereich nicht.
Diagnose vor der Korrektur
Bild: alt="Historische Umschlagstanzung"
Klickbereich: href="#archive-sample-title"
Linkname: fehlt
Axe area-alt: Verstoß, kritischBildkarten gezielt wiederfinden
Suchen Sie Seiten mit verlinkten Bildbereichen und prüfen Sie dort jedes tatsächliche Ziel.
Illustratives Beispiel · Unbenannte Bildbereiche
3 von 100 Seiten3 % mit diesem Befund im Beispiel
Ein Feld steht für eine Seite. Ein Kreuz markiert eine betroffene Seite.
Betroffene Seiten im Beispiel: 18, 46, 83.
97 Seiten sind unmarkiert. Das bedeutet nur: kein Befund dieser Regel im Beispiel. Es ist kein Nachweis vollständiger Barrierefreiheit.
Benennen Sie die Funktion jedes Bereichs
Folgen Sie dem href des betroffenen Bereichs und vergleichen Sie das Ziel mit der Grafik.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Sprung zu einem Abschnitt | Der Bereich verweist wie hier auf eine Überschrift derselben Seite. | Benennen Sie den Zielabschnitt: „Zur Archivprobe: Sarahs Umschlag von 1997“. |
| Link zu einer anderen Seite | Ein Bereich öffnet etwa die Detailseite eines Standorts oder einer Person. | Verwenden Sie den konkreten Standort oder Personennamen und gegebenenfalls den Zweck der Zielseite. |
| Bereich ohne Linkfunktion | Die markierte Fläche soll keine Navigation auslösen. | Klären Sie zuerst, ob der vorhandene Link fachlich gebraucht wird. Ein aktiver Link darf nicht mit alt="" verborgen werden. |
Kontext ansehen
Ein Umschlag, ein eigener Bildlink
Die Aufnahme zeigt die vollständige Archivprobe mit Überschrift, Erklärung, Skizze und benachbarten Bedienelementen. Die Markierung umfasst die Grafik; der geprüfte Link liegt auf ihrer linken Hälfte.
Der Bildbereich verweist zurück auf „Archivprobe: Sarahs Umschlag von 1997“. Dieses Ziel ist im HTML vorhanden, aber am Link nicht benannt. Ein Screenshot allein kann diesen fehlenden Namen nicht sichtbar machen.
Bereich beschriften
Ergänzen Sie alt direkt am area-Element
Der Text benennt das tatsächliche Sprungziel. Die Zuordnung über usemap und map sowie die vorhandenen Koordinaten bleiben erhalten. Das Bild behält seinen eigenen Alt-Text.
Im CMS oder Karteneditor Öffnen Sie die Eigenschaften des einzelnen verlinkten Bereichs. Hinterlegen Sie dort den Alternativtext und prüfen Sie im veröffentlichten HTML, dass er am area-Element ankommt.
Vorher
<map name="envelope-map-221">
<area shape="rect" coords="0,0,90,80"
href="#archive-sample-title">
</map>Nachher
<map name="envelope-map-221">
<area shape="rect" coords="0,0,90,80"
href="#archive-sample-title"
alt="Zur Archivprobe: Sarahs Umschlag von 1997">
</map>Markierte Zeilen wurden geändert
Umsetzung absichern
Prüfen Sie Karte und Bereiche getrennt
Die Bildbeschreibung erklärt den Zusammenhang; jeder Linkname erklärt ein erreichbares Ziel.
- 1
Ordnen Sie das usemap-Attribut des Bildes dem passenden name am map-Element zu.
- 2
Gehen Sie jedes area mit href durch: Stimmen Linkname und Ziel überein?
- 3
Vermeiden Sie bloße Formen wie „linkes Rechteck“; nennen Sie den erreichbaren Inhalt.
- 4
Kontrollieren Sie nach Größenänderungen, ob die Klickflächen noch auf den vorgesehenen Bildteilen liegen.
- 5
Bieten Sie die Ziele zusätzlich als sichtbare Textlinks an, damit die Navigation auch bei problematischer Kartendarstellung erreichbar bleibt.
Fehlversuche vermeiden
Ein Name muss mehr leisten als den Test beruhigen
Nur den Alt-Text des Bildes ändern
„Historische Umschlagstanzung“ beschreibt die Skizze. Der eigene Linkname am area-Element fehlt danach weiterhin.
Alle Bereiche „Hier klicken“ nennen
Ein nicht leerer Wert kann den technischen Befund beseitigen, ohne die Ziele unterscheidbar zu machen.
Den aktiven Bereich als dekorativ behandeln
alt="" lässt das Ziel dieses Links unbenannt. Dekorative Bildteile und verlinkte Flächen haben unterschiedliche Aufgaben.
Die Markierung mit der Klickfläche verwechseln
Im Beleg ist die ganze Grafik markiert, damit sie erkennbar bleibt. Die Koordinaten 0,0,90,80 definieren nur ihre linke Hälfte.
Der Linkname ist ergänzt, das Bild sieht gleich aus
Der erneute Axe-Lauf besteht area-alt am unveränderten area-Knoten. Die Reparatur ergänzt ausschließlich den Namen; beide Rohaufnahmen sind pixelgleich.
Verifiziert ist dieser einzelne Linkname. Die übrigen Bedienelemente der Archivprobe und die vollständige Bedienbarkeit der Karte sind damit nicht geprüft.
Diagnose nach der Korrektur
Linkname: „Zur Archivprobe: Sarahs Umschlag von 1997“
Ziel: #archive-sample-title, unverändert
Axe area-alt: bestanden am selben Element
Darstellung: unverändertPrüfgrenze verstehen
Was area-alt erkennt und was Sie selbst prüfen
Die Regel prüft die technische Benennung aktiver Bildbereiche. Sie bewertet keine vollständige Navigation.
Automatisch prüfbar
- Einen aktiven area-Link ohne zugänglichen Namen erkennen.
- Den betroffenen Knoten und seine fehlenden Namensquellen ausgeben.
- Nach einer Änderung feststellen, ob dieser Knoten area-alt besteht.
Im Kontext zu entscheiden
- Beurteilen, ob jeder Name sein Linkziel zutreffend und verständlich beschreibt.
- Tastaturbedienung, Fokusdarstellung und Screenreader-Ausgabe im Nutzerweg prüfen.
- Klickflächen bei veränderter Bildgröße und auf mobilen Geräten testen.