Tabs sind ein Bedienelement, das mehrere gleichrangige Inhalte hinter einer Leiste aus Reitern zeigt. Immer genau einer ist offen, ein Klick wechselt zum nächsten. Die Seite springt dabei nicht und lädt nicht neu, es wird nur der sichtbare Bereich getauscht.
- Tabs
Bedienelement, das gleichrangige Inhalte hinter einer Reiterleiste zeigt, von denen immer genau einer offen ist.
Beispiel: „Beschreibung, technische Daten und Lieferzeit liegen auf der Produktseite in Tabs.“Auch: Reiter oder Registerkarten. Das Bild stammt vom Aktenordner, dessen Trennblätter oben herausstehen und sich greifen lassen.
Abgrenzung zum Accordion: Beim Accordion liegen die Titel untereinander, mehrere Bereiche können offen sein, und alle können geschlossen sein. Bei Tabs ist immer genau einer offen.
Wann Tabs passen
Tabs eignen sich für Inhalte, die zum selben Gegenstand gehören und sich gegenseitig ausschließen. Die Produktseite mit Beschreibung, technischen Daten und Lieferhinweisen ist der Standardfall, ebenso ein Preisvergleich nach Laufzeit.
Sie passen schlecht, wenn jemand zwei Inhalte nebeneinander lesen will. Wer technische Daten mit der Beschreibung abgleichen möchte, muss bei Tabs hin und her wechseln und sich merken, was auf der anderen Seite stand. Dafür ist ein Accordion die bessere Wahl.
Das Markup entscheidet über die Bedienbarkeit
Die Reiterleiste trägt die Rolle tablist, jeder Reiter die Rolle tab und jeder Inhaltsbereich die Rolle tabpanel. Der offene Reiter wird über aria-selected markiert, und die Pfeiltasten wechseln zwischen den Reitern, während die Tabulatortaste in den Inhalt springt.
<div role="tablist" aria-label="Produktdetails">
<button role="tab" aria-selected="true" aria-controls="p1" id="t1">Beschreibung</button>
<button role="tab" aria-selected="false" aria-controls="p2" id="t2">Technische Daten</button>
</div>
<div role="tabpanel" id="p1" aria-labelledby="t1">…</div>
<div role="tabpanel" id="p2" aria-labelledby="t2" hidden>…</div>Die vollständigen Tastaturanforderungen beschreibt das ARIA Authoring Practices Guide im Muster Tabs. Ohne diese Verdrahtung ist eine Reiterleiste mit der Tastatur praktisch nicht zu bedienen, weil der Fokus nicht erkennbar ist.
Tabs auf schmalen Bildschirmen
Vier Reiter nebeneinander brauchen Breite. Auf einem Telefon bleiben zwei Möglichkeiten: Die Leiste scrollt waagerecht, oder die Tabs werden zu einem Accordion. Die scrollende Leiste versteckt Reiter außerhalb des sichtbaren Bereichs, weshalb der letzte Reiter angeschnitten dargestellt sein sollte. Nur so ist erkennbar, dass es weitergeht.