tabindex im HTML
Der Fokus landet, wo er hingehört
Verborgener Bereich, verschachtelter Button, Scrollfenster: drei Stellen der Tabreihenfolge.
Fokusplan statt Zahlenliste
Der Tabweg folgt der Seite
Native Elemente bilden die Strecke. Null fügt einen Halt ein, minus eins ein Sprungziel.
- Startseite
<a href="/">nativ - Suche
<input type="search">nativ - Statusprotokoll
<div tabindex="0">explizit - Prüfung absenden
<button type="submit">nativ
Der Grundsatz: Beginnen Sie ohne tabindex.
Link, Button und Formularfeld sind bereits im Tabweg. Ergänzen Sie ein Attribut erst, wenn ein konkreter Fokuspfad es verlangt und Sie diesen Pfad mit der Tastatur geprüft haben.
Native Elemente
Kein Attribut. Die Reihenfolge ergibt sich aus dem logisch aufgebauten Quelltext.
<button>Speichern</button>Zusätzlicher Tabstopp
Nur wenn ein nicht natives Element im normalen Tastaturweg tatsächlich bedienbar sein muss.
<div tabindex="0">Fokusziel für Skripte
Per focus() erreichbar, von der Tabulatortaste bewusst ausgelassen.
<section tabindex="-1">Positivwerte verändern die Strecke
Aus vier Feldern wird ein Zickzackweg
Positive Werte laufen zuerst in aufsteigender Reihenfolge. Erst danach folgen native Elemente und tabindex="0" in Quelltextreihenfolge.
- Name nativ
- E-Mail tabindex 3
- Telefon tabindex 1
- Absenden tabindex 2
- 1 Telefon
- 2 Absenden
- 3 E-Mail
- 4 Name
Reparatur: positive Attribute entfernen und die Elemente im DOM in eine logische Reihenfolge bringen. CSS darf die sichtbare Anordnung nicht davon entkoppeln.
Ein Scrollbereich als expliziter Halt
Verwenden Sie dies, wenn Ihr Browsertest den Bereich selbst nicht zuverlässig erreicht.
<div
class="protokoll"
tabindex="0"
role="region"
aria-label="Statusprotokoll"
>
<p>Anfrage eingegangen</p>
<p>Prüfung abgeschlossen</p>
<p>Bericht bereitgestellt</p>
</div>.protokoll {
max-block-size: 8rem;
overflow: auto;
}
.protokoll:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
} Chrome 132 fokussiert viele Scrollbereiche ohne Attribut. Testen Sie Ihre Zielbrowser und fügen Sie 0 nicht pauschal zu jedem overflow hinzu.
Ein Ergebnis als gezieltes Fokusziel
Setzen Sie den Fokus, wenn sich nach einer Aktion ein neuer Kontext öffnet.
<section
id="ergebnisse"
tabindex="-1"
aria-labelledby="ergebnisse-titel"
>
<h2 id="ergebnisse-titel">Prüfergebnisse</h2>
<p>Drei Fundstellen benötigen eine Prüfung.</p>
</section>const ziel = document.querySelector('#ergebnisse');
if (ziel instanceof HTMLElement) {
ziel.focus();
}Der sichtbare Fokusrahmen gehört zum Ziel. Entfernen Sie ihn nicht; er bestätigt den Kontextwechsel für Menschen, die der Seite per Tastatur folgen.
Tastaturprüfung
Zeichnen Sie den echten Weg nach
- Vorwärts: Laden Sie neu und drücken Sie nur Tab. Notieren Sie jeden Halt.
- Rückwärts: Wiederholen Sie den Weg mit Umschalt + Tab.
- Kontext: Lösen Sie Dialoge, Fehler und neue Ergebnisse aus. Der Fokus muss folgen.
- Sichtbarkeit: Jeder Halt hat einen erkennbaren Fokusrahmen und liegt im Bild.
Die Reihenfolge muss Bedeutung und Bedienbarkeit erhalten. Sie muss nicht schematisch von oben nach unten laufen, darf aber weder überraschend springen noch Bedienelemente auslassen.
Aus dem Prüfbericht
Drei Stellen im Tabweg
Kritisch Ein Link steckt in einer Schaltfläche Regel nested-interactive
Zwei Bedienelemente teilen sich einen Tabstopp. Stellen Sie Link und Button nebeneinander, dann hat jedes seinen eigenen.
Kritisch Das Scrollfenster nimmt keinen Fokus Regel scrollable-region-focusable
Der verdeckte Inhalt lässt sich im Zielbrowser nicht mit der Tastatur scrollen. Machen Sie den Bereich selbst oder ein Element darin erreichbar.
Zum Mitnehmen
Die Tabreihenfolge, korrigiert
Ein Attribut entfernt, ein Element getrennt, ein tabindex gesetzt.
Korrektur in 3 Schritten ansehen
aria-hidden aus dem Fokusweg nehmen
Sichtbar und per Tab erreichbar, aber vor Vorleseprogrammen verborgen: das passt nicht zusammen. Der Link soll bedienbar bleiben, also entfällt aria-hidden.
KorrekturvergleichSchritt 1 · HTML Vorher
<div aria-hidden="true"> <a href="/archiv">Archiv öffnen</a> </div>Nachher
<div> <a href="/archiv">Archiv öffnen</a> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Tabben Sie auf den Link. Ein Vorleseprogramm nennt jetzt seinen Text.
Link und Schaltfläche nebeneinander stellen
Ein Link im Button ergibt einen Tabstopp mit zwei Bedeutungen. Nebeneinander behalten beide ihre eigene Rolle und ihr eigenes Ziel.
KorrekturvergleichSchritt 2 · HTML Vorher
<button>Filter wählen <a href="#ergebnisse">Zu den Ergebnissen</a> </button>Nachher
<button type="button">Filter wählen</button> <a href="#ergebnisse">Zu den Ergebnissen</a>Markierte Zeilen wurden geändert
So prüfen Sie es Tabben Sie durch. Sie halten zweimal, einmal auf der Schaltfläche, einmal auf dem Link.
Das Scrollfenster erreichbar machen
Wenn der Browsertest keinen Tastaturzugang zeigt, nimmt tabindex null den Bereich explizit in die Reihenfolge auf. Rolle und Name geben ihm Kontext.
KorrekturvergleichSchritt 3 · HTML Vorher
<div class="protokoll" style="max-height:3rem;overflow:auto"> <p>Schritt 01 · Schritt 02 · Schritt 03 · Schritt 04</p> </div>Nachher
<div class="protokoll" style="max-height:3rem;overflow:auto" tabindex="0" role="region" aria-label="Schrittprotokoll"> <p>Schritt 01 · Schritt 02 · Schritt 03 · Schritt 04</p> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Tabben Sie in das Fenster und drücken Sie Pfeil-ab. Der verdeckte Text kommt hervor.