Praxisleitfaden ARIA-Rollenbeschreibung
Eine Rollenbeschreibung braucht eine passende Rolle
„Stoßmarke“ klingt fachlich passend. Als aria-roledescription an einem einfachen Text fehlt aber die semantische Grundlage. Sehen Sie, wie Sie den Befund einordnen und gezielt beheben.
aria-roledescriptionWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-aria-roledescription.html
Befund verstehen
Der Text ist vorhanden. Die Rollenbeschreibung ist falsch platziert.
Im Bandenpult steht „Marke an der kurzen Bande“ in einem div mit aria-roledescription="Stoßmarke". Dieses Attribut beschreibt eine vorhandene Rolle für assistive Technik; es erzeugt selbst keine Rolle.
Warum das relevant ist
Menschen mit Screenreader verlassen sich auf Rollen, um Inhalt und Bedienung zu verstehen. Die zusätzliche Beschreibung ist hier keine verlässliche Information über die Funktion des Textes.
Scanner-Signal
Die Regel aria-roledescription meldet .notebook > div:first-of-type: Das Element hat keine Rolle, die diese Rollenbeschreibung unterstützt.
- Regel
aria-roledescription- Referenz
- WCAG 4.1.2
Diagnose im HTML
Element: div
Text: Marke an der kurzen Bande
aria-roledescription: Stoßmarke
Passende semantische Rolle: fehlt
Axe: aria-roledescription · Verstoß · WCAG 4.1.2Braucht die Fundstelle überhaupt eine eigene Rollenbeschreibung?
Prüfen Sie zuerst die tatsächliche Aufgabe des Elements. Der Begriff aus der Fachsprache entscheidet nicht über die richtige HTML-Semantik.
Fundstelle im Kontext
Die Marke innerhalb des Bandenpults
Der Ausschnitt enthält den vollständigen Archivabschnitt mit Überschrift, Einführung und benachbarten Bedienelementen. Die Markierung grenzt die betroffene Textzeile ab.
„Marke an der kurzen Bande“ ist hier eine reine Information. Die Rollenbeschreibung „Stoßmarke“ steckt unsichtbar im HTML und fügt weder eine Aktion noch eine gültige Rolle hinzu.
Attribut korrigieren
Den Text erhalten, die unnötige Rollenbeschreibung entfernen
Die Reparatur entfernt ausschließlich aria-roledescription am betroffenen div. Der Text und die Gestaltung bleiben erhalten. Eine zusätzliche interaktive Rolle wäre für diese Information fachlich nicht begründet.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Entfällt
aria-roledescription="Stoßmarke"
Im CMS oder Komponenten-Editor Prüfen Sie die erweiterten Attribute des Textblocks. Entfernen Sie die benutzerdefinierte Rollenbeschreibung auch aus der Vorlage, falls der Editor sie beim Speichern wieder erzeugt.
Vollständigen Code vergleichen
Vorher
<div aria-roledescription="Stoßmarke">
Marke an der kurzen Bande
</div>Nachher
<div>
Marke an der kurzen Bande
</div>Markierte Zeilen wurden geändert
Umsetzung absichern
Rolle, Name und Beschreibung getrennt prüfen
Diese Angaben erfüllen verschiedene Aufgaben. Kontrollieren Sie bei ähnlichen Fundstellen die Komponente als Ganzes, bevor Sie ARIA ergänzen.
- 1
Bestimmen Sie, ob die Fundstelle nur Inhalt ist oder eine konkrete Bedienhandlung ermöglicht.
- 2
Leiten Sie eine benötigte Rolle aus dieser Funktion ab; bevorzugen Sie passende native HTML-Elemente.
- 3
Verwenden Sie aria-label oder aria-labelledby nur für den zugänglichen Namen eines dafür geeigneten Elements. aria-roledescription ersetzt diesen Namen nicht.
- 4
Wenn eine eigene Rollenbeschreibung notwendig bleibt, formulieren Sie sie verständlich in der Sprache der Oberfläche und prüfen Sie ihre tatsächliche Ausgabe.
Fehlversuche erkennen
Was den Befund nur verschiebt
role="button" an die Textzeile setzen
Das würde eine Bedienfunktion behaupten, die hier nicht existiert. Eine technisch akzeptierte Kombination ersetzt keine fachlich passende Semantik.
Aus „Stoßmarke“ einen role-Wert machen
role nimmt definierte Rollen an. Ein frei erfundener Fachbegriff erzeugt keine gültige ARIA-Rolle.
Nur den Wert umformulieren
Auch aria-roledescription="Markierung" lässt die fehlende semantische Grundlage am div unverändert.
Die Textzeile ausblenden
aria-hidden würde die Information vor assistiver Technik verbergen. Beheben Sie das falsch verwendete Attribut und erhalten Sie den Inhalt.
Der Inhalt bleibt, der konkrete Verstoß entfällt
Nach dem Entfernen von aria-roledescription meldet Axe an der Fundstelle keinen Verstoß mehr. Die Regel ist im Beispiel nicht mehr anwendbar; es wurde kein bestandener Rollen-Test behauptet.
So prüfen Sie die Korrektur nach
- Im gerenderten DOM prüfen: Die Textzeile ist weiterhin vorhanden, aria-roledescription und eine nachträglich erfundene Rolle sind nicht gesetzt.
- Die Regel aria-roledescription erneut ausführen und das Ergebnis der konkreten Fundstelle vergleichen.
- Mit Screenreader prüfen, ob „Marke an der kurzen Bande“ im Lesefluss erhalten bleibt und nicht als Bedienelement angekündigt wird.
Die Aufnahmen und der Re-Test belegen nur diese Korrektur. Andere absichtlich fehlerhafte Elemente im Bandenpult bleiben außerhalb des gezeigten Eingriffs.
Verifizierter Zustand
Text: unverändert vorhanden
aria-roledescription: entfernt
role: nicht ergänzt
Axe: Regel nicht anwendbar (inapplicable)
Bildpunkte vor/nach der DOM-Korrektur: identischPrüfgrenzen kennen
Technische Kombination prüfen, Bedeutung beurteilen
Der automatische Befund zeigt eine unzulässige Verwendung der Rollenbeschreibung. Ob eine zulässige Beschreibung im konkreten Nutzerweg hilft, erfordert zusätzliche Beurteilung.
Automatisch prüfbar
- Die hier fehlende geeignete Rolle an einem Element mit aria-roledescription erkennen.
- Den betroffenen DOM-Knoten und seine Attribute dem Seitenkontext zuordnen.
- Nach dem Entfernen des Attributs das nicht mehr anwendbare Regelresultat nachweisen.
Im Kontext zu entscheiden
- Entscheiden, ob das Element eine Information, ein Container oder ein Bedienelement ist.
- Verständlichkeit einer individuellen Rollenbeschreibung mit Screenreader beurteilen.
- Bei interaktiven Komponenten zusätzlich Tastaturbedienung, Fokus und Zustände prüfen.