Barrierefreie Tabs (Tablist)

Aktualisiert am 14. Oktober 2026 · Lesezeit: 5 Min.

Produktseiten teilen Beschreibung, Spezifikationen, Lieferung und Bewertungen oft in Tabs auf. Richtig gebaut, lassen sich Tabs per Tastatur schnell bedienen. Mit div-Elementen und Klick-Handlern gebaut, verbergen sie den Großteil der Produktinformationen vor Tastatur- und Screenreader-Nutzern. Diese Seite gehört zur Reihe barrierefreie UI-Muster.

Wann Sie Tabs einsetzen

Das APG definiert Tabs als „geschichtete Inhaltsabschnitte, Tab-Panels genannt, die jeweils einen Inhaltsbereich zur Zeit anzeigen“, wobei jeder Bereich einen Tab hat, der ihn bei Aktivierung anzeigt. Nutzen Sie Tabs für wenige zusammengehörige, parallele Abschnitte ähnlichen Gewichts, zwischen denen Nutzer wechseln. Nicht verwenden sollten Sie sie für:

Navigation zwischen Seiten – das sind Links in einem nav, auch wenn sie wie Tabs gestaltet sind; kennzeichnen Sie den aktuellen mit aria-current="page".
Lange, aufeinanderfolgende Inhalte oder mehr als eine Handvoll Abschnitte – nehmen Sie Überschriften oder ein Akkordeon.

Relevante WCAG-Kriterien

4.1.2 Name, Rolle, Wert (A): Rollen tab, tablist, tabpanel und der ausgewählte Zustand.
1.3.1 Info und Beziehungen (A): Die Beziehung zwischen Tab und Bereich steht im Code.
2.1.1 Tastatur (A): Alle Tabs lassen sich per Tastatur erreichen und aktivieren.
2.4.3 Fokus-Reihenfolge (A) und 2.4.7 Fokus sichtbar (AA).
1.4.11 Nicht-Text-Kontrast (AA): Die Anzeige des ausgewählten Tabs braucht 3:1 Kontrast.
1.4.1 Benutzung von Farbe (A): Der ausgewählte Tab wird nicht nur durch Farbe gezeigt.
1.4.10 Umfluss (Reflow) (AA): Tabs funktionieren auch auf einem Bildschirm mit 320 CSS-Pixeln Breite.

Codebeispiel

<div class="tabs">
  <div role="tablist" aria-label="Produktinformationen">
    <button type="button" role="tab" id="tab-desc" aria-selected="true"
            aria-controls="panel-desc">Beschreibung</button>
    <button type="button" role="tab" id="tab-specs" aria-selected="false"
            aria-controls="panel-specs" tabindex="-1">Spezifikationen</button>
    <button type="button" role="tab" id="tab-reviews" aria-selected="false"
            aria-controls="panel-reviews" tabindex="-1">Bewertungen (12)</button>
  </div>

  <div role="tabpanel" id="panel-desc" aria-labelledby="tab-desc" tabindex="0">…</div>
  <div role="tabpanel" id="panel-specs" aria-labelledby="tab-specs" tabindex="0" hidden>…</div>
  <div role="tabpanel" id="panel-reviews" aria-labelledby="tab-reviews" tabindex="0" hidden>…</div>
</div>

Was das Skript tun muss:

Pfeiltasten bewegen den Fokus zwischen den Tabs. Dazu dient ein wandernder tabindex (roving tabindex): Der aktive Tab hat tabindex="0", die anderen tabindex="-1", wie im APG-Leitfaden zur Tastaturbedienung beschrieben.
Bei Aktivierung: aria-selected="true" am neuen Tab und false an allen anderen setzen, seinen Bereich anzeigen und die übrigen mit hidden verbergen.
Die tablist hat aria-label oder aria-labelledby, wenn es eine sichtbare Überschrift gibt.
Das APG sagt, ein Bereich „sollte tabindex="0" setzen“, wenn er keinen fokussierbaren Inhalt hat oder sein erster Inhalt nicht fokussierbar ist, damit Tab ihn erreichen kann.
Eine vertikale Tab-Liste erhält aria-orientation="vertical" und nutzt Pfeil nach oben und unten.

Tastaturbedienung

Aus dem APG-Muster für Tabs (horizontale Tab-Liste):

Taste	Funktion
Tab	Bewegt den Fokus in die Tab-Liste auf den aktiven Tab; von der Liste zum Bereich oder zum nächsten Element
Pfeil links	Vorheriger Tab; vom ersten springt er zum letzten. Aktiviert ihn optional
Pfeil rechts	Nächster Tab; vom letzten springt er zum ersten. Aktiviert ihn optional
Leertaste oder Enter	Aktiviert den Tab, wenn er nicht schon beim Fokus aktiviert wurde
Pos1 / Ende	Optional: erster oder letzter Tab
Entf	Optional: schließt einen Tab, wenn Löschen erlaubt ist

Automatische oder manuelle Aktivierung. Das APG sagt: „Es wird empfohlen, Tabs automatisch zu aktivieren, wenn sie den Fokus erhalten“, falls der Bereich ohne spürbare Verzögerung angezeigt wird, was meist bedeutet, dass sein Inhalt schon geladen ist. Braucht das Anzeigen eines Bereichs eine Netzwerkanfrage, macht die automatische Aktivierung die Pfeilnavigation langsam – dann nutzen Sie die manuelle Aktivierung mit Leertaste oder Enter. Das APG hat Beispiele für beides.

Typische Fehler in Online-Shops

Tabs aus li- oder div-Elementen mit Klick-Handlern: keine Rolle, keine Tastatur, kein Auswahlzustand.
Alle Tabs in der Tab-Reihenfolge und keine Pfeiltasten – oder Pfeiltasten, aber fehlendes role="tab", sodass Screenreader nicht „Tab 2 von 3“ ansagen.
aria-selected bleibt am ersten Tab auf true, nachdem ein anderer gewählt wurde.
Bereiche, die mit opacity: 0 verborgen oder aus dem Bild geschoben sind, aber noch lesbar und fokussierbar bleiben.
Als Tabs gestaltete Navigation mit role="tab", obwohl jeder „Tab“ eine neue Seite lädt.
Per Skript geladener Tab „Bewertungen“ und automatische Aktivierung, die bei jedem Pfeiltastendruck eine Anfrage auslöst.
Der ausgewählte Tab wird nur durch eine leicht andere Farbe gezeigt.

Was automatische Prüfungen finden und was manuell zu testen ist

Automatisch (axe-core-Regel)	Was sie findet
`aria-required-parent`	`role="tab"`, der nicht in einer `tablist` liegt
`aria-required-children`	`role="tablist"` ohne `tab`-Kinder
`aria-valid-attr-value`	`aria-controls`/`aria-labelledby` mit Verweis auf fehlende IDs; ungültiges `aria-selected`
`aria-allowed-attr`	Attribute, die an `tab` oder `tabpanel` nicht erlaubt sind
`button-name`, `aria-command-name`	Tabs ohne Namen, etwa Nur-Icon-Tabs
`duplicate-id-aria`	Doppelte IDs, die in ARIA-Verweisen verwendet werden
`scrollable-region-focusable`	Scrollbare Bereiche, die Tastaturnutzer nicht erreichen

Alle sind Karten in unserer Regelbibliothek. Manuelle Tests: Gehen Sie mit Tab in die Tab-Liste, nutzen Sie die Pfeiltasten, Pos1 und Ende, prüfen Sie, dass nur ein Tab in der Tab-Reihenfolge liegt, dass der Bereich wechselt und dass ein Screenreader Rolle, Position und ausgewählten Zustand ansagt. Prüfen Sie die optische Anzeige mit dem Kontrast-Checker.

Starten Sie die kostenlose Prüfung einer Seite auf einer Produktseite. Sie ist eine automatische Prüfung, kein vollständiges Audit.

Häufige Fragen

Welche ARIA-Rollen brauchen barrierefreie Tabs?

Einen Container mit role="tablist" und einer Beschriftung, darin Elemente mit role="tab", jedes mit aria-selected und aria-controls, und Bereiche mit role="tabpanel", die von ihrem Tab beschriftet werden.

Wie wechseln Tastaturnutzer zwischen Tabs?

Tab führt in die Tab-Liste auf den aktiven Tab; Pfeil links und rechts wechseln zwischen den Tabs und springen an den Enden um; Pos1 und Ende sind optional; ein weiteres Tab führt weiter zum Bereich. In der Tab-Reihenfolge liegt nur ein Tab.

Sollte ein Tab beim Fokus oder erst mit Enter aktiviert werden?

Das APG empfiehlt, Tabs automatisch zu aktivieren, wenn sie den Fokus erhalten, solange der Bereich ohne spürbare Verzögerung erscheint. Muss der Bereich erst laden, nutzen Sie die manuelle Aktivierung mit Enter oder Leertaste.

Sind Tabs oder ein Akkordeon auf einer mobilen Produktseite besser?

Beides kann barrierefrei sein. Tabs brauchen horizontalen Platz und das vollständige Tastaturmodell; ein Akkordeon aus Disclosure-Buttons ist einfacher und funktioniert auf schmalen Bildschirmen gut. Viele Shops nutzen Tabs auf dem Desktop und ein Akkordeon auf Mobilgeräten.

Kann eine automatische Prüfung Tabs testen?

Sie findet Tab-Rollen außerhalb einer Tablist, Tablists ohne Tabs, aria-controls mit Verweis auf fehlende IDs und ungültige aria-selected-Werte. Pfeiltasten kann sie nicht prüfen, auch nicht, ob sich aria-selected ändert, wenn ein anderer Tab gewählt wird.

Quellen

W3C WAI, APG Tabs pattern: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
W3C WAI, APG Developing a Keyboard Interface (roving tabindex): https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/