A: Benutzerdefinierte Steuerelemente haben zugeordnete Beschriftungen (WCAG 4.1.2)

Das bedeutet

Individuell erstellte interaktive Elemente, wie Schalter, Dropdowns oder Slider, die nicht aus nativen HTML-Elementen bestehen, müssen eine eindeutige Beschriftung besitzen. Diese Beschriftung wird von assistiven Technologien (z. B. Screenreadern) über Attribute wie aria-label oder aria-labelledby erkannt und vorgelesen.

Auswirkung

Fehlt die Beschriftung, können Nutzer und Nutzerinnen mit Screenreader nicht nachvollziehen, was das Steuerelement bewirkt. Das führt zu massiven Bedienbarrierien und Verstößen gegen WCAG 4.1.2 (A) „Name, Rolle, Wert“.

Empfehlung

• Jedem interaktiven Element (z. B. Buttons, Switches, Custom Inputs) muss ein zugänglicher Name zugewiesen werden.

• Beschriftungen sollen verständlich, eindeutig und funktional sein („Suche starten“ statt „OK“).

• Sichtbare Labels sollten – wenn vorhanden – mit der zugänglichen Beschriftung übereinstimmen.

• Wenn kein sichtbarer Text vorhanden ist, nutze ein aria-label oder verweise über aria-labelledby auf ein sichtbares Label.

Beispiele

Problematisch: Benutzerdefinierte Buttons oder Switches ohne Text oder ARIA-Beschriftung.
Besser: Jeder interaktive Bereich hat eine klar erkennbare Funktion und wird von Screenreadern korrekt angesagt.

Hinweis

Dieses Kriterium prüft nicht das visuelle Design, sondern ob eine semantische Beschriftung vorhanden und korrekt verknüpft ist.

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