A: Elemente dürfen nur erlaubte ARIA-Attribute verwenden (WCAG 4.1.2) 

• Bedeutung
• Auswirkung
• Empfehlung
• Beispiele

Stellt sicher, dass ARIA-Attribute für die vergebene Rolle eines Elements erlaubt sind.

Das bedeutet

Jedem ARIA-Attribut ist festgelegt, bei welchen Rollen es zulässig ist. Werden z. B. aria-selected auf einem button oder aria-pressed bei role="switch" verwendet, entsteht ein Rollen/Attribut-Mismatch. Assistive Technologien können Zustand und Zweck nicht korrekt ausgeben.

Auswirkung

Fehlbedienungen, falsche Screenreader-Ansagen, gebrochene Tastaturmuster und damit WCAG-Verstoß. Das beeinträchtigt Orientierung, Conversion und Compliance.

Empfehlung

• Native HTML bevorzugen (z. B. <button>, <input type="checkbox">, <ul>/<li>).
• Nur rollenkompatible States/Properties verwenden:
  • button → ggf. aria-pressed (Toggle).
  • role="switch" → aria-checked (nicht aria-pressed).
  • role="tab" → aria-selected, aria-controls (in tablist).
  • role="checkbox", menuitemcheckbox → aria-checked.
• Widersprüche vermeiden (keine redundanten/konfliktierenden ARIA-Attribute).
• Deko/ohne Interaktion: ARIA entfernen bzw. aria-hidden="true".

Beispiel

Problematisch

<button aria-selected="true">Senden</button>             <!-- 'selected' nicht für button -->
<div role="switch" aria-pressed="true">Ton</div>         <!-- switch braucht aria-checked -->
<li role="listitem" aria-checked="true">Option A</li>    <!-- 'checked' nicht für listitem -->

Besser

<button aria-pressed="true">Senden</button>              <!-- Toggle-Button korrekt -->
<div role="switch" aria-checked="true" aria-label="Ton"></div>
<label><input type="checkbox" checked> Option A</label>  <!-- nativ statt falscher ARIA -->

Verknüpfte WCAG-Kriterien:
WCAG 4.1.2 – Name, Rolle, Wert