Interaktive Elemente sind alle Teile einer Website, mit denen Nutzer etwas tun können: Links, Buttons, Eingabefelder, Checkboxen, Auswahllisten, Schieberegler, Tabs, Akkordeons, Menüs, Videoplayer-Steuerungen oder Karten.
Anforderungen an interaktive Elemente
- Tastatur (WCAG 2.1.1): erreichbar mit Tab und bedienbar mit Enter, Leertaste oder Pfeiltasten; keine Tastaturfalle (2.1.2).
- Sichtbarer Fokus (2.4.7): klarer Fokusindikator.
- Name, Rolle, Wert (4.1.2): zugänglicher Name, korrekte Rolle und aktueller Zustand (z. B. ausgewählt, ausgeklappt).
- Zielgröße (2.5.8): mindestens 24 × 24 CSS-Pixel oder ausreichend Abstand.
- Kontrast (1.4.11): Rahmen und Zustände mit mindestens 3:1.
- Vorhersehbar (3.2.1, 3.2.2): keine unerwarteten Kontextänderungen bei Fokus oder Eingabe.
Native Elemente zuerst
Die zuverlässigste Lösung sind native HTML-Elemente: a, button, input, select, details, dialog. Sie bringen Tastaturbedienung und Semantik mit. Eigene Komponenten aus div und JavaScript brauchen tabindex, ARIA-Rollen und Tastatur-Handler – und sind fehleranfällig.
Häufige Fragen
Dürfen interaktive Elemente verschachtelt werden?
Nein. Ein Button in einem Link oder ein Link in einem Button ist ungültiges HTML und verwirrt Screenreader.
Ist eine ganze klickbare Karte barrierefrei?
Ja, wenn der Link auf der Überschrift liegt und per CSS auf die Karte erweitert wird, statt die ganze Karte in einen Link zu packen.
Verwandte Begriffe: Button-Beschriftungen, Tastaturschnittstelle, Durch Software gesetzt, Zielgröße