Praxisleitfaden ARIA-Rollen prüfen
Ungültige ARIA-Rollen beheben
Erfundene Rollen erkennen, die Elementfunktion klären und gezielt korrigieren.
aria-rolesWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-aria-roles.html
Befund verstehen
„bruchstueck“ ist keine ARIA-Rolle
Scanner-Signal
aria-roles meldet role="bruchstueck" an der Markerkarte im Grammatikregister.
Technische Einordnung
- Regel
aria-roles- Referenz
- WCAG 4.1.2
Der Wert stammt aus der Fachsprache der Redaktion und benennt ein Textbruchstück. Im role-Attribut steht er jedoch an der Stelle einer standardisierten technischen Rolle. Axe erkennt den unbekannten Wert als ungültig.
Bedeutung im Nutzungskontext
Die beabsichtigte Sonderrolle lässt sich so nicht an assistive Technik vermitteln. Der Text „Nicht erkannte Grammatikrolle“ kann weiterhin lesbar sein; das Attribut macht daraus aber kein zugängliches Bedienelement.
Diagnose an der Markerkarte
HTML: <div role="bruchstueck">Nicht erkannte Grammatikrolle</div>
Axe: invalidrole
Ungültiger Rollenwert: bruchstueckWelche Semantik braucht die Fundstelle?
Entscheiden Sie anhand des tatsächlichen Inhalts und Verhaltens, bevor Sie eine Rolle ersetzen.
Fundstelle ansehen
Die Markerkarte im Grammatikregister
Der Ausschnitt umfasst das vollständige Register der ungeprüften Grammatikmarker mit allen Karten der beiden Reihen. Die Markierung ordnet den Codebefund der Karte „Nicht erkannte Grammatikrolle“ zu.
Die Rolle ist im Screenshot selbst nicht lesbar. Der Diagnoseblock zeigt deshalb den fehlerhaften Attributwert. Die benachbarten Karten gehören zum Kontext, nicht zur hier geprüften Korrektur.
Attribut korrigieren
Die erfundene Rolle entfernen
An dieser Stelle steht ausschließlich Text. Entfernt wird nur role="bruchstueck"; das div und sein Inhalt bleiben bestehen. Eine zusätzliche Widget-Rolle würde dem Beispiel eine Funktion zuschreiben, die es nicht besitzt.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Entfällt
role="bruchstueck"
In der Vorlage Suchen Sie im Baustein nach dem ausgegebenen role-Attribut. Entfernen Sie den Wert an seiner Quelle und kontrollieren Sie das gerenderte HTML nach der Veröffentlichung.
Vollständigen Code vergleichen
Vorher
<div role="bruchstueck">Nicht erkannte Grammatikrolle</div>Nachher
<div>Nicht erkannte Grammatikrolle</div>Markierte Zeilen wurden geändert
Umsetzung absichern
Rollen beschreiben Funktion
Prüfen Sie bei weiteren Fundstellen sowohl den Rollenwert als auch seinen Zweck.
- 1
Trennen Sie sichtbare Fachbegriffe von standardisierten Rollen: „Bruchstück“ darf Inhalt bleiben, ist aber kein Rollenname.
- 2
Kontrollieren Sie, ob das HTML-Element die benötigte Semantik bereits mitbringt.
- 3
Prüfen Sie dynamische Attributbindungen: Sie dürfen keine übersetzten Beschriftungen als role ausgeben.
- 4
Testen Sie betroffene Varianten einer gemeinsamen Komponente nach deren Änderung erneut.
Fehlkorrekturen vermeiden
Ein gültiges Wort allein reicht nicht
Pauschal role="button" setzen
Die Markerkarte löst keine Aktion aus. Eine gültige Button-Rolle wäre hier eine falsche Funktionsbeschreibung.
Rollen übersetzen
ARIA-Rollennamen sind technische Werte. Deutsche Bezeichnungen gehören in den Inhalt oder die passende Beschriftung.
Mit aria-hidden ausblenden
Das würde den sichtbaren Text für assistive Technik verbergen. Für diese Markerkarte genügt es, die ungültige Rolle zu entfernen.
Text erhalten, ungültige Rolle entfernt
Der Kontrolllauf findet die Markerkarte weiterhin, aber keinen aria-roles-Befund mehr an ihr. Der ursprüngliche Selektor trifft nicht mehr zu, weil das role-Attribut entfernt wurde.
So prüfen Sie die Korrektur nach
- Der Text „Nicht erkannte Grammatikrolle“ steht weiterhin im ursprünglichen div.
- Das div besitzt kein role-Attribut mehr; sein sichtbares Erscheinungsbild bleibt identisch.
- Der erneute Axe-Lauf meldet an der erhaltenen Karte weder einen Verstoß noch ein unvollständiges Ergebnis für aria-roles.
Das ist eine verifizierte Entfernung des fehlerhaften Attributs, kein Axe-Pass für eine neue Rolle. Andere Elemente und Regeln der Kalibrierseite sind damit nicht freigegeben.
Diagnose nach der Korrektur
HTML: <div>Nicht erkannte Grammatikrolle</div>
Ungültiges role-Attribut: entfernt
Markerkarte: vorhanden
aria-roles an der Markerkarte: kein BefundPrüfgrenzen kennen
Gültige Rolle und passende Funktion getrennt prüfen
Der technische Rollencheck liefert einen konkreten Ansatzpunkt. Die Funktionsentscheidung braucht den Seitenkontext.
Automatisch prüfbar
- Ungültige Rollenwerte an erfassten Elementen melden.
- Den betroffenen Knoten mit seiner Fundstelle verbinden.
- Die Entfernung des ungültigen Attributs im erneuten Lauf kontrollieren.
Im Kontext zu entscheiden
- Bewerten, ob die gewählte Semantik zur tatsächlichen Funktion passt.
- Bei interaktiven Komponenten Tastaturbedienung und Screenreader-Ausgabe erproben.
- Weitere Zustände wie geöffnete Dialoge oder aktivierte Register prüfen.