Tabs: Inhalte umschalten mit Pfeiltasten statt Klick-Marathon

Wann Sie das Muster einsetzen

Tabs passen für gleichrangige Inhalte, die man nicht gleichzeitig sehen muss, zum Beispiel Produktdetails, technische Daten und Lieferung. Brauchen Besucher die Inhalte nacheinander oder wollen sie vergleichen, ist eine normale Seite mit Zwischenüberschriften oft besser.

Tabs sind keine Navigation: Führt ein Element auf eine andere Seite, ist es ein Link in einer <nav>, kein Tab.

Rollen, Zustände, Eigenschaften

• Container mit role="tablist" und einem Namen über aria-label oder aria-labelledby.
• Jeder Tab ist ein <button role="tab"> mit aria-selected und aria-controls.
• Nur der aktive Tab hat tabindex="0", alle anderen tabindex="-1" (Roving Tabindex).
• Jeder Bereich hat role="tabpanel", aria-labelledby auf seinen Tab und tabindex="0", wenn er selbst nichts Fokussierbares enthält.
• Inaktive Bereiche sind mit hidden ausgeblendet.

Tastaturbedienung

Code

<div role="tablist" aria-label="Produktinfos">
  <button role="tab" id="t1" aria-selected="true"
    aria-controls="p1">Details</button>
  <button role="tab" id="t2" aria-selected="false"
    aria-controls="p2" tabindex="-1">Lieferung</button>
</div>
<div role="tabpanel" id="p1" aria-labelledby="t1"
  tabindex="0">…</div>
<div role="tabpanel" id="p2" aria-labelledby="t2"
  tabindex="0" hidden>…</div>

// Pfeiltasten: tabs[i].focus(), dann select(i)
list.addEventListener('keydown', e => {
  const n = { ArrowRight: i + 1, ArrowLeft: i - 1,
    Home: 0, End: tabs.length - 1 }[e.key];
  if (n === undefined) return;
  e.preventDefault();
  select((n + tabs.length) % tabs.length);
});

Häufige Fehler

• Jeder Tab ist ein eigener Tab-Stopp: Wer weiter will, muss sich durch alle Tabs tabben.
• Tab-Rollen ohne Pfeiltasten-Steuerung: Screenreader kündigen Tabs an, die sich dann nicht wie Tabs verhalten.
• Aktiver Tab nur farblich markiert, ohne aria-selected und ohne zweites sichtbares Merkmal.
• Links, die die Seite wechseln, als Tabs ausgezeichnet.

Passende WCAG-Kriterien

• 4.1.2 Name, Rolle, Wert
• 2.1.1 Tastatur
• 2.4.3 Fokus-Reihenfolge
• 1.4.1 Benutzung von Farbe
• 1.4.11 Nicht-Text-Kontrast

Quellen

• W3C APG: Tabs Pattern