# Fokusreihenfolge: Logische Tab-Reihenfolge (WCAG 2.4.3)

Source: https://allyway.ai/de/glossary/fokusreihenfolge

Die Fokusreihenfolge ist die Abfolge, in der interaktive Elemente beim Drücken der Tab-Taste den Tastaturfokus erhalten. WCAG 2.4.3 verlangt, dass diese Abfolge Bedeutung und Bedienbarkeit der Seite erhält.

Die Fokusreihenfolge bestimmt, in welcher Abfolge Links, Buttons und Formularfelder den Tastaturfokus bekommen, wenn jemand die Tab-Taste drückt. Folgt sie dem Aufbau der Seite, kommen Tastaturnutzer genauso logisch voran, wie andere lesen. Springt der Fokus dagegen kreuz und quer, wird schon ein kurzes Kontaktformular zum Suchspiel.

## Was es bedeutet

Das Erfolgskriterium [WCAG 2.4.3 Fokus-Reihenfolge](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html) gehört zur Stufe A der [WCAG 2.2](https://allyway.ai/de/regulations/wcag-2-2). Es greift, wenn sich eine Seite sequenziell durchlaufen lässt und die Reihenfolge Bedeutung oder Bedienung beeinflusst. Dann müssen fokussierbare Elemente den Fokus in einer Abfolge erhalten, die Sinn und Bedienbarkeit bewahrt.

In HTML ergibt sich die Tab-Reihenfolge aus der Reihenfolge der Elemente im Quellcode. Zwei Dinge verändern sie: positive `tabindex`-Werte und Skripte, die den Fokus verschieben oder Inhalte einfügen. Das W3C stellt klar, dass mehrere Reihenfolgen richtig sein können – eine Tabelle lässt sich zeilen- oder spaltenweise durchgehen – und dass die Fokusreihenfolge dem Layout nicht pixelgenau folgen muss. Verwirren darf sie aber niemanden.

Betroffen sind Menschen, die per [Tastaturbedienung](https://allyway.ai/de/glossary/tastaturbedienung) surfen, Screenreader-Nutzer, Personen mit Schaltersteuerung und alle, die Formulare mit Tab statt Maus ausfüllen. Stimmt die Abfolge nicht, landen Eingaben im falschen Feld, Inhalte werden übersehen, die Orientierung geht verloren.

| Situation | Ergebnis |
|---|---|
| Quellcode-Reihenfolge entspricht der sichtbaren Reihenfolge | Erfüllt |
| Seitenleiste im HTML nach dem Hauptinhalt, per CSS links platziert | Erfüllt (Beispiel des W3C) |
| Positive `tabindex`-Werte, die zwischen Bereichen springen | Nicht erfüllt (F44) |
| Dialog oder Menü steht in der Tab-Reihenfolge nicht neben seinem Auslöser | Nicht erfüllt (F85) |
| Modaler Dialog hält den Fokus und gibt ihn beim Schließen zurück | Erfüllt |

> **Tip:** > **Quellcode ordnen statt tabindex setzen**
> Die W3C-Technik C27 empfiehlt, die DOM-Reihenfolge an die sichtbare Reihenfolge anzupassen. Verwenden Sie `tabindex="0"`, um ein eigenes Steuerelement fokussierbar zu machen, und `tabindex="-1"` für Elemente, die Sie per Skript fokussieren – positive Werte vermeiden Sie besser.

## Praxisbeispiele

Ein Newsletter-Formular, in dem positive `tabindex`-Werte den Cursor vom Vornamen direkt zur Checkbox am Ende schicken:

```html title="Beispiel"
<!-- Falsch: positiver tabindex zerstört die natürliche Reihenfolge -->
<input id="vorname" tabindex="1">
<input type="checkbox" id="newsletter" tabindex="2">
<input id="nachname" tabindex="3">

<!-- Richtig: Quellcode = Lesereihenfolge, kein tabindex nötig -->
<input id="vorname">
<input id="nachname">
<input type="checkbox" id="newsletter">
```

Ein Menü oder Dialog gehört im DOM direkt hinter den Button, der es öffnet (Technik SCR26) – so landet der nächste Tab-Schritt darin. Ein modaler Dialog mit dem HTML-Element `dialog` (H102) hält den Fokus, solange er offen ist.

**Do:** Do

HTML-Reihenfolge und Lesereihenfolge gleich halten. Aufklappende Inhalte direkt nach ihrem Auslöser einfügen. Beim Schließen eines Dialogs den Fokus zum Auslöser zurückgeben. Einen [Skip-Link](https://allyway.ai/de/glossary/skip-link) anbieten, damit Tastaturnutzer die Navigation überspringen können.

**Don't:** Don't

Mit `tabindex="1"` oder höher ein Layout „reparieren“. Inhalte nur per CSS umsortieren (`order`, `flex-direction: row-reverse`, absolute Positionierung), sodass sichtbare und Tab-Reihenfolge auseinanderlaufen. Dialoge ans Ende von `body` hängen, ohne den Fokus zu setzen.

## So prüfen Sie die Fokusreihenfolge



## Häufige Fragen

Q: Was ist der Unterschied zwischen Fokusreihenfolge und Tab-Reihenfolge?
A: Im Alltag meinen beide dasselbe: die Abfolge, in der Elemente mit der Tab-Taste den Fokus erhalten. „Fokus-Reihenfolge“ ist der Begriff der WCAG, „Tab-Reihenfolge“ beschreibt, wie Tastaturnutzer sie erleben.

Q: Sollte ich die Reihenfolge mit tabindex festlegen?
A: Nur mit `tabindex="0"` und `tabindex="-1"`. Positive Werte erzeugen eine eigene Reihenfolge, die vor allem anderen kommt und schwer zu pflegen ist – geht dabei Sinn oder Bedienbarkeit verloren, wertet das W3C das als Fehler F44.

Q: Muss die Fokusreihenfolge genau dem Layout folgen?
A: Nein. Laut W3C muss sie nicht exakt dem Layout entsprechen, aber nachvollziehbar sein. Eine Seitenleiste, die im HTML nach dem Hauptinhalt steht, ist in Ordnung; ein Formular, das zwischen nicht zusammengehörigen Feldern springt, nicht.

Q: Welche Gesetze verlangen eine logische Fokusreihenfolge?
A: 2.4.3 ist ein Kriterium der Stufe A und damit Teil jeder Norm, die auf WCAG AA aufbaut – etwa der [EN 301 549](https://allyway.ai/de/regulations/en-301-549) (Abschnitt 9.2.4.3), auf die sich das [Barrierefreiheitsstärkungsgesetz](https://allyway.ai/de/regulations/bfsg) stützt.

Q: Wie finde ich Fokusprobleme auf meiner Website?
A: Am zuverlässigsten ist es, die Seite selbst mit Tab zu durchlaufen, denn ob eine Reihenfolge sinnvoll ist, kann kein Tool beurteilen. Für alles, was sich automatisch erkennen lässt, prüft der [kostenlose WCAG-Scanner](https://allyway.ai/de/free-wcag-accessibility-scanner-for-websites) Ihre Startseite nach WCAG 2.2 AA.