tablist

Verwendung

Um die Reihe (oder Spalte) von role="tab"-Elementen in einer Registerkartenoberfläche herum. Die tablist MUSS einen zugänglichen Namen über aria-label oder aria-labelledby besitzen — ohne diesen kann ein Screenreader-Nutzer bei der Ansage „Tab-Liste“ nicht erkennen, um welche tablist auf der Seite es sich handelt.

Vertikale Tab-Streifen benötigen aria-orientation="vertical". Der Standardwert ist horizontal — bei horizontalen Tabs kann das Attribut weggelassen werden.

Wenn die „Tabs“ eigentlich zur Navigation zu anderen URLs dienen, sollte stattdessen <nav> mit <a>-Links verwendet werden — das Muster, bei dem Klicks URLs ändern, passt nicht zur tablist-Semantik.

Tastatur- und Fokusvertrag

Gemäß dem APG-Tabs-Muster:

• Tab verschiebt den Fokus in die tablist, auf den ausgewählten Reiter; ein weiterer Tab-Tastendruck bewegt den Fokus heraus (in der Regel ins aktive tabpanel).
• Pfeil-links/rechts verschieben den Fokus zwischen den Reitern (Pfeil-oben/unten bei vertikalen tablists). Ein Umbruch am Ende ist optional, aber üblich.
• Pos1 / Ende springen zum ersten bzw. letzten Tab.
• Aktivierung: Im automatischen Modus verschieben Pfeiltasten den Fokus und wählen gleichzeitig aus. Im manuellen Modus (empfohlen bei aufwendiger Aktivierung) wählt Leerzeichen oder Enter den fokussierten Tab aus.

Die tablist selbst nimmt keinen Fokus auf — der Fokus geht auf den Tab, nicht auf den tablist-Behälter.

Häufige Fehler

• tablist ohne zugänglichen Namen. Mehrere tablists auf einer Seite werden ununterscheidbar.
• Alle Tabs haben tabindex="0". Das Muster sieht einen einzigen Tab-Stop vor; nur der ausgewählte Tab hat tabindex="0".
• Fehlendes aria-orientation="vertical" bei einer vertikalen tablist — der Screenreader weist Nutzer an, Pfeil-links/rechts zu verwenden, obwohl das visuelle Layout Pfeil-oben/unten erfordert.
• role="tablist" umschließt Links (<a href="#section">) statt Schaltflächen. Anker-Scroll springt die Seite und bricht die Zurück-Schaltfläche.
• tabpanel mit display: none UND hidden-Attribut verborgen, obwohl eines ausreicht.

Beispiel

<div role="tablist" aria-label="Project sections" aria-orientation="horizontal">
  <button role="tab" id="t-overview" aria-selected="true"  aria-controls="p-overview" tabindex="0">Overview</button>
  <button role="tab" id="t-files"    aria-selected="false" aria-controls="p-files"    tabindex="-1">Files</button>
  <button role="tab" id="t-team"     aria-selected="false" aria-controls="p-team"     tabindex="-1">Team</button>
</div>