Praxisleitfaden Serverseitige Image-Maps
Bildkarten per Tastatur zugänglich machen
Klickziele erfassen, passende Links anbieten und deren Erreichbarkeit manuell prüfen.
server-side-image-mapWCAG 2.1.1
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-server-side-image-map.html
Prüfhinweis verstehen
Ein Bild mit ismap braucht eine genauere Prüfung
Im Archivblatt „Alte Pumpenkarte am Trockenbeet“ liegt der gezeichnete Beetplan in einem Link mit ismap-Attribut. Das Attribut kennzeichnet eine serverseitige Bildkarte: Der Browser schickt die Klickposition an den Server. Der Scanner erkennt diese Konstruktion; ob alle Funktionen ohne Zeigegerät erreichbar sind, muss ein Mensch prüfen.
Warum das relevant ist
Bei einer echten serverseitigen Bildkarte entscheidet die angeklickte Position über das Ziel. Der Plan zeigt Beet A bis C, die Zulaufrinne und die Pumpen 1 und 2; wer nur die Tastatur nutzt, kann keine dieser Stellen wie mit der Maus ansteuern. Ein fokussierbarer Link um das gesamte Bild belegt deshalb noch keinen Zugang zu allen Regionen.
Scanner-Signal
Axe meldet server-side-image-map für .field-card img[ismap] als incomplete.
- Regel
server-side-image-map- Referenz
- WCAG 2.1.1
Befund am Beispiel
img[ismap] vorhanden
Axe: incomplete · impact: minor
Linkziel: #pump-map-target
Bildinhalt: Beetplan mit Beet A bis C, Zulaufrinne, Pumpe 1 und Pumpe 2
Kein Koordinatenserver in dieser KalibrierseiteBildkartenziele vollständig abgleichen
Planen Sie den Vergleich der vorhandenen Ziele mit ihren Tastaturalternativen. Die Annahmen beziehen sich auf Seiten mit Bildkarten.
Rechenbeispiel · Tastaturalternativen für Bildkarten
- Annahme: alle Ziele der Bildkarte sind bereits bekannt.
- Annahme: fünfzehn Minuten je Seite für Zielvergleich und Tastaturprüfung; Ermittlung der Serverlogik nicht enthalten.
Das ist keine gemessene Prüfzeit und kein Vergleich mit der Scanner-Geschwindigkeit. Inhaltliche Beurteilungen bleiben manuelle Arbeit.
Welche Funktion muss erhalten bleiben?
Erfassen Sie zuerst die tatsächlich hinterlegten Ziele der Bildkarte.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Ein einziges Ziel | Die vorhandene Konstruktion verweist wie hier nur auf einen Abschnitt der Seite. | Lösen Sie das ismap-Konstrukt auf: Das Bild bleibt mit beschreibendem alt-Text stehen, das Ziel bekommt einen verständlich beschrifteten Textlink. |
| Mehrere auswählbare Regionen | Verschiedene Bildpositionen führen zu unterschiedlichen Seiten oder Funktionen. | Bieten Sie jedes Ziel als eigenen Textlink an oder verwenden Sie eine clientseitige Karte mit benannten area-Links. |
| Unklare Serverlogik | Die Zuordnung von Koordinaten zu Aktionen liegt nur im Backend oder in Altbeständen. | Klären Sie diese Zuordnung vor dem Umbau. Ohne sie lässt sich nicht beurteilen, ob die Alternative vollständig ist. |
Fundstelle ansehen
Der Beetplan im Archivblatt
Der vollständige Abschnitt zeigt Überschrift, Pumpenschema, den gezeichneten Beetplan und das Linkziel darunter. Die Markierung umfasst das Bild, das im ismap-Link liegt.
Der Plan zeigt sichtbar Beet A bis C, die Zulaufrinne und zwei Pumpen. Diese Stellen sind nur als Bildpositionen vorhanden, nicht als benannte Ziele. Hinterlegt ist allein der Verweis auf „Ziel der Beetkarte: Wartungsprotokoll für Beet B“ unter dem Bild.
Alternative umsetzen
Die Karte behalten, das Ziel verlinken
Für das einzige hinterlegte Ziel genügt ein normaler Link. Das Beispiel nimmt das Bild aus dem ismap-Link heraus, beschreibt seinen Inhalt im alt-Text und setzt daneben den Textlink „Zur Beetkarte: Wartungsprotokoll für Beet B“. Es zeigt keine Migration einer funktionsfähigen Karte mit mehreren Regionen.
Im CMS oder Template Ersetzen Sie den alten Bildkarten-Baustein durch das reine Bild und einen Link zum bestehenden Ziel. Bei mehreren Regionen legen Sie für jedes tatsächliche Ziel einen eigenen, verständlich benannten Link an.
Vorher
<a href="#pump-map-target">
<img ismap alt="Serverseitige Beetkarte" src="…">
</a>Nachher
<img src="…"
alt="Beetplan Trockenbeet: Beet A bis C,
Zulaufrinne, Pumpe 1 und Pumpe 2">
<a href="#pump-map-target">
Zur Beetkarte: Wartungsprotokoll für Beet B
</a>Markierte Zeilen wurden geändert
Umsetzung absichern
Zielgleichheit vor dem Entfernen der Karte klären
Die Alternative muss die bisherigen Wege vollständig erhalten.
- 1
Notieren Sie für jede bisherige Klickregion das Ziel und gegebenenfalls die ausgelöste Aktion.
- 2
Verwenden Sie echte Links mit href für Navigation. Beschriften Sie sie nach dem Ziel, nicht nach Koordinaten.
- 3
Bei einer clientseitigen Karte verbinden Sie img und map über usemap und name; geben Sie jedem area-Link einen passenden alt-Text.
- 4
Erhalten Sie Informationen der ursprünglichen Grafik als Bild oder Text, wenn diese über die Navigation hinausgehen.
- 5
Prüfen Sie nach dem Umbau auch schmale Ansichten: Alle Links und gegebenenfalls Kartenregionen müssen erreichbar bleiben.
Fehlversuche vermeiden
Warum kleine Attributänderungen oft nicht reichen
Nur ismap entfernen
Damit verschwindet das Erkennungssignal. Bei mehreren serverseitigen Zielen geht aber die Koordinatenauswahl verloren, solange keine gleichwertigen Wege bereitstehen.
Nur den Bildtext verbessern
Ein verständlicher alt-Text benennt das Bild. Er macht die einzelnen serverseitigen Regionen nicht per Tastatur auswählbar.
Den Bildlink mit Tab erreichen
Der Fokus auf dem umgebenden Link beweist lediglich dessen Erreichbarkeit. Aktivieren Sie zusätzlich jede Alternative und vergleichen Sie ihre tatsächlichen Ziele.
Einen verschwundenen Hinweis als Abschluss werten
Nach dem Entfernen des img-Elements ist diese Regel hier nicht mehr anwendbar. Vollständige Navigation und funktionierende Ziele sind damit noch nicht belegt.
Korrekturbeispiel mit offenem Funktionstest
In der Browserkopie trägt das Bild kein ismap mehr, sondern einen beschreibenden alt-Text; daneben steht der Textlink zum vorhandenen Ziel #pump-map-target. Axe findet deshalb keine serverseitige Bildkarte mehr; der Status bleibt Korrekturbeispiel.
Im Beispiel dokumentiert
Korrekturbeispiel · Manuell nachprüfen
Der Plan steht jetzt als beschriebenes Bild ohne ismap; daneben führt „Zur Beetkarte: Wartungsprotokoll für Beet B“ zum bisherigen Ziel.
Was Sie zusätzlich beurteilen müssen
Der automatische Nachtest bestätigt hier nur das entfernte Konstrukt und den vorhandenen Ersatzlink. Die Kalibrierseite hat keinen Koordinatenserver; ob die Regionen des Plans vollständig erreichbar sind und WCAG 2.1.1 erfüllt ist, bleibt eine manuelle Prüfung.
Das Attribut finden, die Funktion beurteilenPrüfauftrag für Ihre Umsetzung
- Öffnen Sie die geänderte Seite, erreichen Sie „Zur Beetkarte“ mit Tab und achten Sie auf einen sichtbaren Fokus.
- Aktivieren Sie den Link mit Enter und prüfen Sie, ob „Ziel der Beetkarte: Wartungsprotokoll für Beet B“ erreicht wird.
- Vergleichen Sie bei einer echten Karte jede frühere Klickregion mit ihrer Tastaturalternative: Ziel, Inhalt und Aktion müssen übereinstimmen.
- Prüfen Sie die Linknamen zusätzlich mit einem Screenreader und dokumentieren Sie fehlende oder abweichende Wege.
Nachtest am Beispiel
Vorher: img[ismap] → incomplete
Nachher: kein img[ismap] mehr im Abschnitt
Ersatzlink: „Zur Beetkarte: Wartungsprotokoll für Beet B“ → #pump-map-target
Regel: nicht mehr anwendbar, kein automatischer Pass
Tastaturbedienung und Zielgleichheit manuell prüfenPrüfumfang kennen
Das Attribut finden, die Funktion beurteilen
Der Scanner liefert den Einstieg in die gezielte Tastaturprüfung.
Automatisch prüfbar
- Das ismap-Konstrukt im gerenderten HTML erkennen
- Den Prüfkandidaten einer konkreten Fundstelle zuordnen
- Nach dem Umbau feststellen, ob die Konstruktion noch vorhanden ist
Im Kontext zu entscheiden
- Alle Ziele und Aktionen der serverseitigen Regionen erfassen
- Jede Alternative per Tastatur bedienen und mit dem bisherigen Ergebnis vergleichen
- Verständliche Namen, sichtbaren Fokus und nutzbare Darstellung in verschiedenen Ansichten prüfen