Einleitung
Tabs sind ein beliebtes UI-Element, um verwandte Inhalte in einzelne Bereiche zu unterteilen. Nutzer können durch Klick auf Tab-Reiter zwischen verschiedenen Inhalts-Panels wechseln – ideal für Produktdetails, Settings oder Kategorien, ohne die Seite zu verlassen.
Doch ohne korrekte Implementierung werden Tabs für Screen Reader Nutzer zum Chaos. Sie hören dann nur unzusammenhängende Links und Texte, ohne zu verstehen, dass es sich um zusammengehörige Inhalte handelt. Mit den richtigen ARIA-Attributen und Tastaturunterstützung machst du deine Tabs für alle zugänglich – egal ob sie Maus, Tastatur oder Screen Reader verwenden.
Die Bausteine barrierefreier Tabs
Ein barrierefreies Tab-System besteht aus folgenden strukturellen Elementen:
divmitrole="tablist": Container für alle Tab-Reiter. Definiert die Gruppe als zusammengehörige Navigation.buttonmitrole="tab": Jeder einzelne Tab-Reiter. Buttons sind fokussierbar und reagieren auf Tastaturaktionen.aria-selected: Zeigt an, welcher Tab aktuell aktiv ist (true) oder inaktiv (false). Nur ein Tab kann gleichzeitig ausgewählt sein.aria-controls: Verknüpft jeden Tab-Button eindeutig mit seinem Inhalts-Panel (über die Panel-ID).divmitrole="tabpanel": Der sichtbare Inhaltsbereich des aktiven Tabs.aria-labelledby: Verweist auf die ID des zugehörigen Tab-Buttons, damit Screen Reader den Panel-Titel korrekt ansagen.hidden: Versteckt inaktive Panels sowohl visuell als auch für assistive Technologien.
Diese Struktur stellt sicher, dass Tabs sowohl für Tastaturnutzende als auch für Screen Reader-Nutzende vollständig zugänglich sind.
Tastaturinteraktion
Damit Tabs vollständig tastaturfreundlich sind, sollten folgende Tasten unterstützt werden:
- Tab: Fokus in die Tab-Liste hinein oder heraus
- Pfeiltasten links/rechts (← →): Navigation zwischen den Tab-Reitern
- Enter oder Leertaste: Aktiven Tab auswählen und Panel anzeigen
- Home / End: Direkt zum ersten oder letzten Tab springen (optional)
