Praxisleitfaden ARIA-Bilder zugänglich beschriften
Ein Bild braucht einen Namen. Text braucht keine Bildrolle.
Prüfen Sie zuerst, ob die Bildrolle zum Inhalt passt, und entscheiden Sie dann über Name oder Entfernung.
role-img-altWCAG 1.1.1
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-role-img-alt.html
Befund verstehen
Sichtbare Wörter ergeben hier keinen Bildnamen
Scanner-Signal
Die vierte Medienkarte enthält ein div mit role="img", aber ohne zugänglichen Namen.
Technische Einordnung
- Regel
role-img-alt- Referenz
- WCAG 1.1.1
„Farbtafel des Splintholzes“ steht als Text im Element. Die Bildrolle behandelt den Inhalt jedoch als eine Grafik, deren Name ausdrücklich zugewiesen werden muss. Der sichtbare Text allein erfüllt diese Anforderung nicht.
Bedeutung im Nutzungskontext
Wer die Seite mit einem Screenreader liest, trifft auf ein unbenanntes Bildobjekt. Die sichtbare Bezeichnung ist dadurch nicht verlässlich als dessen Name verfügbar.
Vorher im geprüften HTML
Rolle: img
Inhalt: Farbtafel des Splintholzes
aria-label / aria-labelledby / title: fehlen
Axe: role-img-alt-VerstoßGrafik benennen oder Bildrolle entfernen?
Untersuchen Sie das betroffene Element samt Darstellung. Der Text einer Karte und eine darin enthaltene Grafik erfüllen unterschiedliche Aufgaben.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Nur Text, wie in dieser Karte | Das Element enthält ausschließlich die Bezeichnung; weder eine Grafik noch eine grafische Komposition ist vorhanden. | Entfernen Sie die unnötige Bildrolle. Der Inhalt bleibt gewöhnlicher Text. |
| Eine informative Grafik | Mehrere Elemente, CSS oder Symbole bilden gemeinsam ein Bild mit eigener Aussage. | Behalten Sie die Bildrolle und vergeben Sie einen passenden Namen mit aria-label oder einem gültigen aria-labelledby-Verweis. |
| Eine komplexe Darstellung | Ein Diagramm oder eine Farbtafel vermittelt mehr Information, als ein kurzer Name ausdrücken kann. | Benennen Sie die Grafik und stellen Sie ihre relevanten Werte oder Zusammenhänge zusätzlich als zugänglichen Text bereit. |
Fundstelle ansehen
Die vierte Karte im Medienarchiv
Der vollständige Abschnitt zeigt Überschrift, Einleitung und alle Medienkarten. Die markierte Stelle ist die Textkarte „Farbtafel des Splintholzes“; das braune Rechteck rechts daneben gehört zu einem anderen Element.
In der markierten Karte ist keine Farbtafel dargestellt. Ihr Text wurde im übernommenen HTML trotzdem als Bild ausgezeichnet. Genau diese Diskrepanz bestimmt die Korrektur.
Ursache beheben
Die Textkarte wieder als Text ausgeben
Entfernen Sie role="img" vom betroffenen div. Der Wortlaut und die Darstellung bleiben erhalten. Ein zusätzliches aria-label würde zwar einen Bildnamen liefern, aber weiterhin eine Grafik behaupten, die dieses Element nicht enthält.
Im Template Prüfen Sie die Medienkarten-Komponente: Vergeben Sie role="img" nur für eine tatsächlich zusammengehörige Grafik, nicht pauschal für jede Karte. Übernehmen Sie die Korrektur in die Quelle, die das veröffentlichte HTML erzeugt.
Vorher
<div role="img">Farbtafel des Splintholzes</div>Nachher
<div>Farbtafel des Splintholzes</div>Markierte Zeilen wurden geändert
Echte Grafiken benennen
Wenn die Bildrolle berechtigt ist
Für tatsächliche ARIA-Grafiken benötigen Sie einen Namen, der ihren Zweck oder ihre wesentliche Aussage vermittelt.
- 1
Verweisen Sie mit aria-labelledby auf eine vorhandene passende Beschriftung; die referenzierte ID muss existieren und Text liefern.
- 2
Verwenden Sie andernfalls aria-label mit einer konkreten Textalternative statt eines Dateinamens oder des Wortes „Grafik“.
- 3
Beschreiben Sie bei Farbtafeln die relevante Bedeutung der Farben; erfinden Sie keine Werte aus einem unbeschrifteten Beispiel.
- 4
Halten Sie bedienbare Links und Schaltflächen außerhalb einer als einzelnes Bild zusammengefassten Gruppe.
Fehlkorrekturen erkennen
Diese Änderungen lösen die Ursache nicht
alt an ein div schreiben
Das alt-Attribut benennt ein gewöhnliches div mit Bildrolle nicht. Für eine echte ARIA-Grafik verwenden Sie eine geeignete ARIA-Beschriftung.
Auf den inneren Text vertrauen
role="img" erhält seinen Namen nicht automatisch aus den sichtbaren Wörtern seiner Kinder. Prüfen Sie den berechneten Namen im Accessibility-Baum.
Jede beanstandete Rolle löschen
Bei einer echten grafischen Komposition kann die Bildrolle sinnvoll sein. Ihr Entfernen würde dann weder die Bildaussage noch einen fehlenden Textersatz liefern.
Die Textkarte ausblenden
aria-hidden="true" würde auch die vorhandene Bezeichnung vor assistiven Technologien verbergen. Hier soll der Text verfügbar bleiben.
Bildrolle entfernt, Text erhalten
Der erneute Lauf findet den bisherigen role="img"-Knoten nicht mehr. Das weiterhin sichtbare Textelement bleibt erhalten und löst role-img-alt nicht aus. Das ist eine entfernte Fehlerursache, kein bestandener Bildnamen-Test.
Im Beispiel dokumentiert
Gelöst
Die vierte Karte enthält denselben sichtbaren Text, aber kein role="img" mehr.
Was Sie zusätzlich beurteilen müssen
Der Nachweis gilt für diese Textkarte und diese Regel. Er bewertet weder die benachbarten Medien noch die Vollständigkeit der Holzkartei.
Ein fehlender Name ist automatisch erkennbarPrüfauftrag für Ihre Umsetzung
- Prüfen Sie im veröffentlichten HTML, dass nur die unnötige Rolle entfernt wurde und der Wortlaut erhalten ist.
- Führen Sie role-img-alt erneut aus und kontrollieren Sie die konkrete Medienkarte.
- Lesen Sie den Abschnitt zusätzlich mit einem Screenreader: Die Bezeichnung soll im Lesefluss erreichbar sein.
Nachher am selben Element
Explizite Bildrolle: entfernt
Text: Farbtafel des Splintholzes, weiterhin sichtbar
Axe: ursprünglicher Zielknoten entfernt
Ersatz: kein role-img-alt-Verstoß
Darstellung: unverändertPrüfumfang kennen
Ein fehlender Name ist automatisch erkennbar
Der Scanner erkennt den strukturellen Widerspruch zwischen Bildrolle und fehlendem Namen. Ob die Rolle fachlich sinnvoll ist, verlangt einen Blick auf den tatsächlichen Inhalt.
Automatisch prüfbar
- Unbenannte Elemente mit role="img" im gerenderten HTML finden
- Leere Beschriftungen und nicht auflösbare Namensverweise beanstanden
- Die Regel nach einer Korrektur an der Fundstelle erneut prüfen
Im Kontext zu entscheiden
- Zwischen gewöhnlichem Text, dekorativem Element und informativer Grafik unterscheiden
- Die inhaltliche Qualität einer Textalternative beurteilen
- Lesefluss und Ausgabe mit assistiven Technologien kontrollieren