A: Verwendete ARIA-Rollen müssen gültigen Werten entsprechen (WCAG 4.1.2)

• Bedeutung
• Auswirkung
• Empfehlung
• Beispiele

Stellt sicher, dass alle Elemente mit einer ARIA-Rolle auch einen gültigen Wert verwenden.

Das bedeutet

Der role Wert muss in der WAI ARIA Spezifikation existieren und darf nicht abstrakt sein. Tippfehler, frei erfundene Rollen oder veraltete Bezeichnungen sind ungültig. Mehrfachrollen sind nur zulässig, wenn jede Rolle gültig ist und die erste Rolle die intendierte Semantik trägt.

Auswirkung

Ungültige Rollen zerbrechen die Semantik. Screenreader kündigen Elemente falsch oder gar nicht an. Nutzerinnen und Nutzer verlieren Orientierung und es liegt ein Verstoß gegen WCAG vor.

Empfehlung

• Bevorzuge natives HTML mit korrekter Semantik (<button>, <nav>, <header>).
• Wenn nötig, nur gültige, nicht abstrakte Rollen setzen (z. B. role="navigation", role="dialog").
• Rollen gegen die aktuelle ARIA Referenz prüfen.
• Keine Fantasie Rollen, keine Tippfehler, keine veralteten Rollen nutzen.

Beispiel

Problematisch

<div role="buttonn">Weiter</div>          <!-- Tippfehler -->
<nav role="navigationmenu">…</nav>        <!-- ungültige Rolle -->
<div role="input">…</div>                 <!-- abstrakte Rolle -->

Besser

<button>Weiter</button>                    <!-- natives Element -->
<nav aria-label="Hauptnavigation">…</nav>  <!-- implizit Rolle navigation -->
<div role="navigation" aria-label="Hauptnavigation">…</div>  <!-- wenn nötig explizit -->