Tab-Reihenfolge durchgehen

Drücken Sie auf einer Webseite Tab, springt der Fokus zum nächsten Link, Button oder Feld. Diese Prüfung schreibt die ganze Route für jede Adresse auf und zeigt die Bedienelemente, die dabei vergessen wurden.

Der Fokus ist der Cursor der Tastatur

Eine Maus kann überallhin zeigen. Eine Tastatur kann nur auf einem Element zur Zeit „stehen“, und diese Position heißt Fokus. Tab bewegt ihn vorwärts, Umschalt+Tab zurück, Enter folgt einem Link, die Leertaste drückt einen Button. Menschen mit Zittern oder eingeschränkter Handbeweglichkeit bewegen sich so fort. Ebenso Screenreader-Nutzer, Menschen mit Schaltern oder Sprachsteuerung und alle, die schnell Formulare ausfüllen.

Der Browser leitet allein aus dem HTML ab, was den Fokus erhalten kann. Links mit href, Buttons, Formularfelder, <summary>, Mediaplayer mit Steuerelementen und Frames liegen standardmäßig auf der Route, in der Reihenfolge ihres Auftretens im Quelltext. Alles andere wird übersprungen, außer ein tabindex-Attribut sagt etwas anderes.

Die drei Bedeutungen von tabindex

Wert	Wirkung	Wann einsetzen
`tabindex="0"`	Nimmt das Element an seiner natürlichen Position in die Route auf	Eigene Bedienelemente, die kein natives `<button>` sein können
`tabindex="-1"`	Nimmt es aus der Route; Skripte können es weiterhin fokussieren	Inaktive Tabs, per Pfeiltasten erreichte Menüpunkte, Karussell-Folien außerhalb des Bildschirms
`tabindex="1"` oder mehr	Stellt es vor alles andere, kleinste Zahl zuerst	Fast nie. Der Fokus springt über den Bildschirm

Der Durchgang folgt diesen Regeln aufs Wort: zuerst positive Werte in aufsteigender Reihenfolge, dann die Quelltextreihenfolge. Eine Gruppe von Radiobuttons mit demselben name zählt als ein Halt, da die Pfeiltasten innerhalb der Gruppe wechseln. Deaktivierte Bedienelemente, geschlossene <dialog>-Elemente, inert- oder hidden-Bereiche und der Inhalt geschlossener <details> bleiben außen vor.

Was die Prüfung markiert

Anklickbare Elemente, die die Tastatur nicht erreicht: Ein <div onclick> oder ein Element mit role="button" ohne tabindex. Mausnutzer können es drücken, Tastaturnutzer kommen nicht einmal hin. Ersetzen Sie es durch <button type="button">, das Fokus, Enter und Leertaste gratis mitbringt.
Links ohne href: Für den Browser ist ein <a> ohne Ziel einfacher Text, und Tab geht direkt daran vorbei.
Bedienelemente mit tabindex="-1": Gemeldet, außer der Link verdoppelt einen anderen erreichbaren Link zur selben Adresse oder gehört zu einer Tab-Liste, einem Menü, einer Werkzeugleiste oder einer ähnlichen Gruppe, in der die Pfeiltasten übernehmen.
Skip-Link: Die Prüfung sucht in den ersten drei Stopps nach einem Link zu einem Anker auf derselben Seite, etwa <a href="#content">Skip to content</a>, und bestätigt, dass die Ziel-id existiert. Sie zählt auch, wie viele Tastendrücke es vom Seitenanfang bis zu <main> braucht. Bei fünf oder weniger wird ein fehlender Skip-Link nur zur Information vermerkt.
Fokusrahmen: Wir durchsuchen die <style>-Blöcke der Seite, Inline-Stile und bis zu fünf Stylesheets derselben Website nach Regeln wie a:focus { outline: none } oder * { outline: 0 }. Ersetzt nichts den Rahmen durch :focus-visible- oder :focus-Stile, ist der Befund rot, denn Tastaturnutzer sehen nicht, wo sie sind.
Weitere Stopps, die einen Blick wert sind: Fokussierbare Elemente in aria-hidden="true", Stopps ohne zugänglichen Namen, Frames ohne title und Links auf # oder javascript:, die als Buttons dienen.

Einen sichtbaren Fokus zurückholen

Designer entfernen den Rahmen oft, weil er nach einem Mausklick auftaucht und sie ihn hässlich finden. Der Selektor :focus-visible beendet den Streit. Er greift nur, wenn der Browser meint, dass der Nutzer den Fokus sehen muss, in der Praxis also bei Tastaturbedienung.

:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

WCAG 2.2 verlangt einen Indikator mit mindestens 3:1 Kontrast zu den umgebenden Farben. Das Muster :focus:not(:focus-visible) { outline: none } ist sicher und wird nicht gemeldet.

Grenzen einer statischen Analyse

Die Route wird aus dem HTML berechnet, das unser Server erhält. Klick-Handler, die per JavaScript mit addEventListener angehängt werden, hinterlassen keine Spur im Markup, ein so verdrahtetes <div> bleibt also unentdeckt. Per Skript gebaute Menüs sind hier ebenfalls unsichtbar, ebenso Tastaturfallen, bei denen der Fokus in ein Widget hineinkommt und nicht mehr heraus. Stylesheets auf einer anderen Domain oder jenseits des fünften werden nicht gelesen.

Schließen Sie mit dem echten Test ab, der zwei Minuten dauert. Legen Sie die Maus beiseite, laden Sie die Seite und drücken Sie Tab, bis Sie den Footer erreichen. Sie sollten immer sehen, wo Sie sind, und jedes Menü öffnen und jedes Formular absenden können.

Häufige Fragen

Wie teste ich die Tastaturnavigation selbst?

Klicken Sie in die Adressleiste und drücken Sie dann immer wieder Tab. Umschalt+Tab geht zurück, Enter wirkt auf Links, die Leertaste auf Buttons und Kontrollkästchen, die Pfeiltasten in Radiogruppen und Menüs, und Escape schließt Dialoge. In Safari unter macOS schalten Sie vorher in den erweiterten Einstellungen „Mit Tabulatortaste alle Objekte einer Webseite hervorheben“ ein.

Reicht tabindex="0" auf einem div, um daraus einen Button zu machen?

Nein. Es macht das Element fokussierbar, aber Enter und Leertaste tun nichts, bis Sie Tasten-Handler hinzufügen, und ein Screenreader nennt es ohne role="button" nicht Button. Ein natives <button> liefert alle drei.

Brauche ich einen Skip-Link, wenn meine Seite ein main-Element hat?

Ja, für sehende Tastaturnutzer. Screenreader können per Tastenkürzel zur Landmarke <main> springen. Wer nur die Tab-Taste benutzt, hat kein solches Kürzel und muss jeden Menüpunkt durchlaufen, wenn Sie keinen Skip-Link anbieten.

Warum passt die Tab-Reihenfolge nicht zu dem, was ich auf dem Bildschirm sehe?

Tab folgt der Reihenfolge des HTML-Quelltexts, nicht dem visuellen Layout. CSS wie order, flex-direction: row-reverse, Grid-Platzierung oder absolute Positionierung kann Elemente auf dem Bildschirm verschieben, ohne ihren Platz im Quelltext zu ändern. Ein positiver tabindex hat dieselbe Wirkung.

Ist outline: none immer ein Barrierefreiheitsfehler?

Nur wenn nichts ihn ersetzt. Eine Regel, die den Rahmen entfernt und im selben Block beim Fokus einen sichtbaren Rand, Hintergrund oder Schatten setzt, ist in Ordnung, und diese Prüfung zählt das als Ersatz.