Standards · ARIA

Rolle Widget

tab

Markiert ein Element als einzelnen Reiter in einer Registerkartenoberfläche. Ein Tab MUSS sich innerhalb einer tablist befinden und SOLLTE über aria-controls auf das zugehörige tabpanel verweisen. Es gibt kein natives HTML-Tab-Element — Tabs sind ein reines ARIA-Muster.

Verwendung

Für einen einzelnen Reiter in einem horizontal oder vertikal angeordneten Tab-Streifen. Ein Tab MUSS direktes Kind-Element eines role="tablist"-Elements sein (oder über aria-owns zugeordnet werden). Jeder Tab MUSS mit aria-controls="<tabpanel-id>" auf das zugehörige Panel verweisen. Das reziproke aria-labelledby befindet sich auf dem Panel und verweist zurück auf den Tab.

Tabs sind ein Anwendungsmuster. Wenn die „Tabs“ eigentlich nur die Navigation zwischen verschiedenen Seiten darstellen, sollte stattdessen <nav> mit <a>-Links verwendet werden — der URL-Wechsel macht das Tab-Muster dort falsch.

Der Tab selbst ist üblicherweise ein <button>. Die Button-Semantik lässt sich sauber mit role="tab" kombinieren, und die Fokus- und Aktivierungslogik ist bereits enthalten.

Tastatur- und Fokusvertrag

Gemäß dem APG-Tabs-Muster:

  • Tab verschiebt den Fokus in die tablist, auf den aktiven Reiter. Ein weiterer Tab-Tastendruck bewegt den Fokus heraus zum nächsten fokussierbaren Element (in der Regel in das tabpanel selbst, wenn es tabindex="0" hat).
  • Pfeil-links/rechts (bzw. Pfeil-oben/unten bei vertikalen tablists) bewegen den Fokus zwischen den Reitern.
  • Pos1 / Ende springen zum ersten bzw. letzten Tab.
  • Die Aktivierung kann automatisch (Fokus = Auswahl) oder manuell (Leerzeichen/Enter zur Auswahl) erfolgen. Manueller Modus empfiehlt sich, wenn das Aktivieren eines Tabs aufwendige Operationen auslöst.

Es wird ein wandernder tabindex verwendet: nur der ausgewählte Tab hat tabindex="0".

Häufige Fehler

  • Alle Tabs mit tabindex="0" — die Tab-Taste durchläuft jeden Reiter statt das Panel.
  • Fehlendes aria-controls, das Tab und tabpanel verbindet.
  • aria-selected="true" auf mehr als einem Tab.
  • Tabs mit <a href="#section"> umgesetzt — das URL-Fragment ändert sich, die Zurück-Schaltfläche navigiert nun zwischen Tabs, und das Muster bricht zusammen.
  • Kein Fokusmanagement bei Aktivierung: Ein Klick auf einen Tab aktualisiert das Panel, aber der nächste Tab-Tastendruck kehrt zur Seitenkopfzeile zurück statt ins Panel zu gehen.

Beispiel

<div role="tablist" aria-label="Account settings">
  <button role="tab" id="t-profile"  aria-selected="true"  aria-controls="p-profile"  tabindex="0">Profile</button>
  <button role="tab" id="t-billing"  aria-selected="false" aria-controls="p-billing"  tabindex="-1">Billing</button>
  <button role="tab" id="t-security" aria-selected="false" aria-controls="p-security" tabindex="-1">Security</button>
</div>
<section role="tabpanel" id="p-profile"  aria-labelledby="t-profile"  tabindex="0">…</section>
<section role="tabpanel" id="p-billing"  aria-labelledby="t-billing"  hidden>…</section>
<section role="tabpanel" id="p-security" aria-labelledby="t-security" hidden>…</section>