A: Benutzerdefinierte Steuerelemente haben geeignete ARIA-Rollen (WCAG 4.1.2)

Das bedeutet

Benutzerdefinierte interaktive Elemente wie Schalter, Schieberegler oder Dropdown-Menüs benötigen eine semantische Rolle, die beschreibt, welche Funktion sie im Interface erfüllen. Diese Rolle wird über das Attribut role definiert und hilft assistiven Technologien zu erkennen, wie ein Element zu bedienen ist.

Auswirkung

Fehlt die korrekte ARIA-Rolle, werden Steuerelemente von Screenreadern nicht als interaktiv erkannt. Nutzer und Nutzerinnen wissen nicht, dass sie das Element bedienen können. Das führt zu Funktionsverlust und verletzt WCAG 4.1.2 (A) „Name, Rolle, Wert“.

Empfehlung

Weisen Sie benutzerdefinierten Elementen immer eine passende ARIA-Rolle zu (z. B. role="button", role="slider", role="checkbox").
Die Rolle muss die tatsächliche Funktion widerspiegeln.
Wenn möglich, bevorzugen Sie native HTML-Elemente, da diese automatisch eine Rolle besitzen.
Achten Sie darauf, dass jede Rolle mit der vorgesehenen Tastatursteuerung kompatibel ist (z. B. Leertaste für Buttons, Pfeiltasten für Slider).

Beispiele

Problematisch: Ein klickbares <div> ohne Rolle oder Tastaturfokus wird von Screenreadern ignoriert.

<div onclick="submitForm()">Absenden</div>

Besser: Dasselbe Element mit role="button" und korrektem Fokusverhalten wird erkannt und ist bedienbar.

<div role="button" tabindex="0" onclick="submitForm()">Absenden</div>

Hinweis

Dieses Prüfkriterium bewertet nicht das Design, sondern die semantische Zugänglichkeit. Die richtige ARIA-Rolle ist entscheidend, damit assistive Technologien das Verhalten korrekt interpretieren können.

Verknüpftes WCAG-Kriterium:
WCAG 4.1.2 – Name, Rolle, Wert
Zur offiziellen WCAG-Dokumentation →