Best practice: Der Wert des role-Attributes muss für dieses Element geeignet sein
aria-allowed-role
Stellt sicher, dass der Wert des role-Attributes für dieses Element geeignet ist.
Das bedeutet
Ein Element erhält eine ARIA-Rolle, die für dessen HTML-Typ nicht zulässig ist oder die starke native Semantik unzulässig überschreibt. Assistive Technologien bekommen dadurch falsche Informationen.
Auswirkung
Screenreader-Ansagen, Fokus- und Tastaturverhalten werden inkonsistent. Das erschwert Orientierung und kann zu Fehlbedienungen und Abbrüchen führen.
Empfehlung
- Native HTML-Elemente bevorzugen (z. B.
<button>,<nav>,<ul>/<li>). - Keine widersprüchlichen Rollen setzen (keine Überschreibung starker Semantik).
- Wenn überhaupt nötig, nur zulässige Rollen gemäß ARIA in HTML verwenden.
- Redundante Rollen entfernen (wenn die implizite Rolle schon passt).
Beispiel
Problematisch
<h2 role="button">Mehr Details</h2> <!-- Heading als Button deklariert -->
<img src="logo.png" alt="Start" role="navigation"> <!-- Bild als Landmark -->
<table role="list">…</table> <!-- Tabelle als Liste deklariert -->
Besser
<button type="button">Mehr Details</button> <!-- natives Steuerelement -->
<nav aria-label="Hauptnavigation">…</nav> <!-- passende Landmark -->
<ul>…</ul> <!-- Liste statt Rolle auf <table> -->