Barrierefreie Tabs ohne Bibliotheken

Das WAI-ARIA-Tabs-Muster in vierzig Zeilen React, inklusive Roving Focus und reduzierter Bewegung.

5 Min. Lesezeit
Barrierefreiheit
3. Juli 2026

Titelgrafik zu „Barrierefreie Tabs ohne Bibliotheken“

Das Muster

Eine Tab-Liste enthält mehrere Tabs; jeder Tab steuert genau ein Panel. Nur der aktive Tab liegt in der Tab-Reihenfolge, die Pfeiltasten wechseln zwischen den Tabs.

role=tablist am Container
role=tab mit aria-selected und aria-controls
role=tabpanel mit aria-labelledby

Unterstützung gesucht?

Lass es uns gemeinsam bauen

Tastaturbedienung

Roving Focus

function onKeyDown(e: React.KeyboardEvent) {
  if (e.key === "ArrowRight") select((index + 1) % count);
  if (e.key === "ArrowLeft") select((index - 1 + count) % count);
}

Pos1 und Ende springen zum ersten und letzten Tab. Die Auswahl folgt dem Fokus – das passt zu Panels, die sofort gerendert werden.

Zurück zu allen Notizen