Zu Content springen
Deutsch
Kontakt
  • Es gibt keine Vorschläge, da das Suchfeld leer ist.

A: ARIA-Attribute müssen entsprechend der Rolle des Elements verwendet werden (WCAG 4.1.2)

aria-conditional-attr

Stellt sicher, dass ARIA-Attribute wie in der Spezifikation der Rolle des Elements beschrieben verwendet werden.

Das bedeutet

Ein Element nutzt ein ARIA-Attribut, das nur in bestimmten Rollen oder Zuständen zulässig ist (z. B. aria-selected nur bei selektierbaren Rollen wie tab/option, aria-checked nur bei checkbox/radio/switch). Außerhalb dieses Kontexts ist das Attribut ungültig.

Auswirkung

Screenreader melden falsche Zustände, Tastaturmuster passen nicht zur Rolle, Nutzer:innen verlieren Orientierung – ein klarer WCAG-4.1.2-Verstoß.

Empfehlung

  • Zuerst korrekte Rolle wählen, dann nur die dafür vorgesehenen ARIA-Attribute setzen.
  • Wo möglich native HTML-Elemente verwenden (bessere Semantik „by default“).
  • Für Auswahlzustände aria-selected (z. B. tab, option), für Schalter aria-checked (checkbox, radio, switch) nutzen.
  • Bei Auf-/Zuklappen aria-expanded nur an steuernden Elementen mit aria-controls-Ziel verwenden.
  • Ungültige/überflüssige ARIA-Attribute entfernen.

Beispiel

Problematisch

<button class="tab" aria-selected="true">Home</button>   <!-- button ist nicht selektierbar -->
<div role="tab" aria-checked="true">Profil</div>         <!-- aria-checked passt nicht zu 'tab' -->
<button aria-expanded="true">Menü</button>               <!-- kein aria-controls-Ziel -->

Besser

<div role="tablist">
  <button role="tab" aria-selected="true"  aria-controls="panel-home"   id="tab-home">Home</button>
  <button role="tab" aria-selected="false" aria-controls="panel-profile" id="tab-profile">Profil</button>
</div>
<section role="tabpanel" id="panel-home"    aria-labelledby="tab-home">…</section>
<section role="tabpanel" id="panel-profile" aria-labelledby="tab-profile" hidden>…</section>
 
<label>
  <input type="checkbox" checked> Newsletter
</label> <!-- natives Element statt aria-checked an falscher Rolle -->
 
<button id="menuBtn" aria-expanded="false" aria-controls="menu-main">Menü</button>
<nav id="menu-main" hidden aria-labelledby="menuBtn">…</nav>

Verknüpftes WCAG-Kriterium:
WCAG 4.1.2 - Name, Rolle, Wert