Tastatur-Navigation (Tab-Navigation) und Fokus-Management

TL;DRTL;DR too long; didn't read. Wörtlich übersetzt "zu lang; nicht gelesen". Überschrift für eine kurze Zusammenfassung eines längeren Artikels oder Beitrags.

Nutz die natürliche Tab-Reihenfolge.

Setz tabindex="0" nur bei echten Custom-Controls.

Stell nie den Tabindex auf >0 – das ist böse!

Manag den Fokus aktiv bei Dialogen/Sprunglinks/besonderen Interaktionen.

Teste selbst – mit Tastatur und ScreenreaderScreenreader Software, die Texte am Bildschirm laut vorliest oder als Braille ausgibt..

Menschen, die keine Maus nutzen können oder Screenreader brauchen, sind auf eine sauber funktionierende Tastatur-Navigation – und damit auf schlaues Fokus-Management – angewiesen. Hier erfährst du kompakt, wie du das richtig umsetzt.

Mit der Tabulatortaste („Tab“) springst du von einem interaktiven Element zum nächsten. Standardmäßig betrifft das:

Links (<a href="…">)
Buttons (<button>)
Formularfelder (<input>, <select>, <textarea>)
und ein paar Spezialfälle (z.B. <summary>, <iframe>)

Für alle diese Elemente stellt der Browser automatisch eine Tab-Reihenfolge her – und das reicht in den meisten Fällen!

tabindex

Mit dem tabindex-Attribut steuerst du gezielt, ob ein Element per Tastatur fokussierbar ist und an welcher Stelle es in der Reihenfolge sitzt.
Wichtigste Werte:

Wert	Effekt	Wann einsetzen?
0	Element folgt der natürlichen Tab-Reihenfolge	Für eigene interaktive Elemente, z.B. custom UI-Widgets.
-1	Element ist nur programmatisch fokussierbar (per JS)	Für modale Dialoge, Skiplinks, kontrollierten Fokuswechsel.
>0	Definiert eine eigene Tab-Reihenfolge	Niemals – macht die Seite unvorhersehbar!

Setze tabindex="0" nur für Elemente, die wirklich interaktiv sind. Ein reines <div tabindex="0"> ist keine Lösung, sondern irreführend.

Fokus-Management

Warum ist der richtige Fokus wichtig?

Für sehende Nutzer*innen: Nur das gerade fokussierte Element zeigt visuelles Feedback (Rahmen, farbliche Änderung, Unterstreichung, Schatten). Häufig wird nur der Mouseover gestaltet und der Tastaturfokus wird vergessen. Bilder haben oft gar keinen sichtbaren Fokus.
Für nicht-sehende Nutzer*innen: Der Screenreader liest das Element vor, das gerade den Fokus hat. Wenn der Fokus springt oder verloren geht, ist die Navigation in der Seite schwierig bis unmöglich.

Deshalb gilt:

Der Fokus muss immer sichtbar sein. Die Standard-Fokus-Stile des Browsers sind ein guter Start, aber du kannst und solltest sie an dein Design anpassen (z.B. mit :focus in CSS). Aber Vorsicht: Wenn du den Standard-Outline ändern möchtest, stelle sicher, dass du eine gleichwertige oder bessere Alternative bereitstellst.
Der Fokus-Indikator muss ausreichend Kontrast haben. Stell sicher, dass er sich vom Hintergrund und den umgebenden Elementen abhebt, damit er auch für Nutzer mit Sehschwäche gut erkennbar ist.

Fokus-Management in der Praxis

Neben dem tabindex-Attribut gibt es noch andere Dinge, die du beachten solltest:

Logische DOM-Reihenfolge: Das ist der Goldstandard! Baue deine HTML-Struktur so auf, dass die Elemente in der Reihenfolge erscheinen, in der sie auch logisch durchtabbbar sein sollten. Screenreader und die Tastatur-Navigation folgen dieser Reihenfolge.
Keine Werte >0! Sie zerstören die logische Reihenfolge und Verstehbarkeit deiner Seite.
Nutze tabindex="-1", wenn du z.B. Überschriften oder ausgeblendete Elemente gezielt ansteuern willst – aber nicht in die Tabreihenfolge einfügen willst.
Mache eigene interaktive Elemente (z.B. gestaltete Dropdowns) mit tabindex="0" fokussierbar, sorge aber unbedingt dafür, dass sie sich wie Standard-Elemente verhalten.
Modale Dialoge: Wenn ein Modal geöffnet wird, sollte der Fokus innerhalb des Modals gefangen werden (Focus Trapping). Das bedeutet, dass der Nutzer nicht versehentlich aus dem Modal heraustabben kann. Beim Schließen des Modals sollte der Fokus auf das Element zurückkehren, von dem aus der Modal geöffnet wurde.
Skiplinks: Bei Seiten mit viel Inhalt und komplexen Navigationsbereichen sind Skiplinks (oder „Sprunglinks“) unverzichtbar. Das sind versteckte Links ganz am Anfang des Dokuments, die sichtbar werden, sobald sie den Fokus erhalten (z.B. durch Tabben). Sie ermöglichen es Nutzern, direkt zum Hauptinhalt oder zur Navigation zu springen und nicht jedes Mal durch die gesamte Kopfzeile tabben zu müssen. WordPress erzeugt diese standardmäßig.
Aria-Attribute und JavaScript: Bei komplexen Widgets (z.B. Tabs, Akkordeons, Dropdowns) ist oft JavaScript nötig, um das Fokus-Management korrekt zu implementieren. Nutze dabei die passenden ARIA-Attribute (z.B. aria-expanded, aria-selected, aria-controls), um den Status und die Beziehungen der Elemente für Screenreader zu vermitteln. WAI-ARIA Authoring Practices: https://www.w3.org/WAI/ARIA/apg/

Testen, Testen, Testen!

Der beste Weg, um sicherzustellen, dass deine Tastatur-Navigation und dein Fokus-Management funktionieren, ist: Teste es selbst!

Stecke deine Maus weg.
Navigiere nur mit der Tab-Taste (und Shift + Tab) durch deine gesamte Website.
Überprüfe:
- Kannst du alle interaktiven Elemente erreichen?
- Ist die Reihenfolge logisch?
- Ist der Fokus immer sichtbar und klar erkennbar?
- Kannst du alle interaktiven Elemente mit Enter/Leertaste bedienen?
- Passiert etwas Unerwartetes (Fokus springt, geht verloren)?
Nutze einen Screenreader: Wenn du wirklich wissen willst, wie sich deine Seite für blinde Nutzer anfühlt, installiere einen Screenreader (NVDA für Windows ist kostenlos, VoiceOver für macOS ist integriert). Das ist ein echter Augenöffner!

Praxistipp:

WordPress erzeugt in Beitragsübersichtsseiten (je nach Theme) für jeden Beitrag bis zu drei identische Links:

Das Beitragsbild

Der Beitragstitel

„Read more“-Link oder -Button

Das bedeutet, beim navigieren durch die Seite muss man dreimal Tab drücken, um zum nächsten Beitrag zu gelangen. Ein Screenreader liest derweil dreimal vor, wohin man mit diesem Link gelangt; für Braille-Nutzer ist es noch schlimmer, da sie jedes Zeichen einzeln ertasten müssen. Daher empfehle ich dringend, alle bis auf einen Link zu entfernen; notfalls per tabindex="-1", besser komplett aus dem HTML entfernen. Per focus-within lassen sich alle Fokus-Effekte für Bild, Titel und das komplette Beitrags-Element steuern. Der einzige Nachteil ist, dass es Javascript braucht, um bei Klick auf die nun nicht mehr verlinkten Elemente den Link aufzurufen – oder einen unsichtbaren Link über dem kompletten Beitrags-Element.