Accessible Tabs
Vier Tab-Stopps für drei Reiter
Ein Wrapper zu viel, ein Reiter ohne Namen: drei Befunde im Register.
Zustände statt Reiter
So bleibt Fokus mit dem richtigen Panel verbunden
Eine visuelle Karte für Tab-Taste, Pfeiltasten und die zwei Aktivierungsarten.
role="tablist" · Produktinfos
id="tab-ueberblick" Daten id="tab-daten" Downloads id="tab-downloads"aria-controls zeigt vom Reiter auf panel-ueberblick.
aria-labelledby zeigt vom Panel zurück auf tab-ueberblick.
role="tabpanel" · id="panel-ueberblick"
Das Gerät wiegt 320 Gramm und lädt über USB-C.
sichtbar · durch „Überblick“ benannt
Tab-Taste außen, Pfeiltasten innen
Drei Reiter erzeugen einen Stopp in der normalen Tab-Reihenfolge. Nur der aktive Reiter bleibt mit tabindex="0" erreichbar, die anderen tragen tabindex="-1".
Automatische Aktivierung
Für vorab geladene Panels, die ohne merkbare Verzögerung erscheinen.
Start
Panel: Überblick
sofort
Panel: Daten
Der Pfeil ändert Fokus, Auswahl und Panel in einem Zug.
Manuelle Aktivierung
Für Inhalte, deren Anzeige Zeit braucht oder erst geladen werden muss.
Start
Panel: Überblick
noch nicht gewählt
Panel: Überblick
gewählt
Panel: Daten
Der Pfeil ändert nur den Fokus. Erst Enter oder Leertaste ändern Auswahl und Panel.
So prüfen Sie es
TabFokus landet auf dem ausgewählten Reiter.
←→Fokus läuft durch die Reiter und springt am Ende um.
HomeEndeFokus erreicht ersten und letzten Reiter.
TabFokus verlässt die Reiterliste zum Panel oder nächsten Ziel.
Prüfen Sie Fokus und Auswahl getrennt. Genau ein Reiter ist ausgewählt, genau ein Panel sichtbar und jede Zuordnung verweist auf eine vorhandene ID.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Ein Reiter hat keinen Namen Regel aria-tab-name
Der Download-Pfeil ist ein Reiter ohne Wort. aria-label="Downloads" oder sichtbarer Text benennt ihn.
Kritisch Die tablist enthält keine Reiter Regel aria-required-children
Ein div zwischen tablist und tab unterbricht die Struktur. Die Reiter müssen direkte Kinder sein.
Kritisch Reiter ohne ihre tablist Regel aria-required-parent
Jeder role="tab" braucht eine role="tablist" als Eltern. Sonst ist es ein Reiter ohne Register.
Zum Mitnehmen
Das Register, korrigiert
Reiter direkt in der tablist, ein Tab-Stopp, Pfeiltasten dazwischen.
Korrektur in 2 Schritten ansehen
Die Reiter direkt in die tablist setzen
Ohne Wrapper stimmt die Struktur. Nur der aktive Reiter hat tabindex 0, die anderen −1.
KorrekturvergleichSchritt 1 · HTML Vorher
<div role="tablist"> <div class="row"> <button role="tab">Überblick</button> <button role="tab">Daten</button> <button role="tab"><svg aria-hidden="true"><use href="#dl"></use></svg></button> </div> </div>Nachher
<div role="tablist" aria-label="Produktinfos"> <button role="tab" aria-selected="true" aria-controls="p1" id="t1">Überblick</button> <button role="tab" aria-selected="false" aria-controls="p2" id="t2" tabindex="-1"> Daten </button> <button role="tab" aria-selected="false" aria-controls="p3" id="t3" tabindex="-1" aria-label="Downloads"><svg aria-hidden="true"><use href="#dl"></use></svg></button> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt „Produktinfos, Registerkarten. Überblick, Registerkarte, ausgewählt, 1 von 3“.
Die Pfeiltasten bewegen den Reiter
Tab betritt das Register einmal. Pfeil links und rechts wechseln den Reiter und den Fokus.
KorrekturvergleichSchritt 2 · JavaScript Vorher
tabs.forEach((tab) => { tab.addEventListener('click', () => select(tab)); });Nachher
tabs.forEach((tab, index) => { tab.addEventListener('click', () => select(tab)); tab.addEventListener('keydown', (event) => { const step = { ArrowRight: 1, ArrowLeft: -1 }[event.key]; if (!step) return; const next = tabs[(index + step + tabs.length) % tabs.length]; select(next); next.focus(); }); });Markierte Zeilen wurden geändert
So prüfen Sie es Tab auf den ersten Reiter, dann Pfeil rechts. Der zweite Reiter ist ausgewählt und fokussiert.