Tastaturnavigation als Grundrecht
Tastaturnavigation ist eine der grundlegendsten Barrierefreiheits-Anforderungen. Menschen mit motorischen Einschränkungen, Screenreader-Nutzer, Power-User und viele andere sind auf die Tastatur angewiesen. Eine Website die nicht vollständig per Tastatur bedienbar ist, schließt diese Nutzenden aus. Die Grundregel: Alles was mit einer Maus klickbar ist, muss auch per Tastatur erreichbar und bedienbar sein.
Grundlegende Tastatur-Interaktionen
Tab
Funktion: Nächstes fokussierbares Element
Shift + Tab
Funktion: Vorheriges fokussierbares Element
Enter
Funktion: Link aktivieren, Button klicken, Formular absenden
Space
Funktion: Checkbox togglen, Button klicken, Scroll
Pfeiltasten
Funktion: Navigation in Komponenten (Menü, Tabs, Radio-Gruppe)
Escape
Funktion: Dialog/Modal schließen, Dropdown schließen
Fokus-Management
Fokus-Management ist die gezielte Steuerung welches Element den Tastatur-Fokus erhält. Gutes Fokus-Management ist unsichtbar — der Fokus folgt der natürlichen Nutzungslogik. Schlechtes Fokus-Management verwirrt und frustriert Tastaturnutzer.
Fokus-Reihenfolge
Die Tab-Reihenfolge sollte der visuellen Reihenfolge im Layout entsprechen — von links nach rechts, von oben nach unten. Das wird durch die DOM-Reihenfolge bestimmt, nicht durch CSS-Positionierung. Wenn CSS die visuelle Reihenfolge verändert, kann das Tab-Reihenfolge und visuelles Layout auseinanderlaufen — ein häufiger Fehler bei Flexbox/Grid-Umordnung.
tabindex
tabindex='0' macht ein nicht-nativ fokussierbares Element fokussierbar (in DOM-Reihenfolge). tabindex='-1' macht ein Element programmatisch fokussierbar aber nicht per Tab erreichbar — für Fokus-Management per JavaScript. tabindex > 0 vermeiden — das bricht die natürliche Tab-Reihenfolge und ist fast immer ein Fehler.
Fokus nach Aktionen
Nach Aktionen die den DOM verändern muss der Fokus sinnvoll gesetzt werden. Beispiele: Dialog öffnen — Fokus auf ersten interaktiven Inhalt im Dialog. Dialog schließen — Fokus zurück auf den auslösenden Button. Seiteninhalt laden — Fokus auf neuen Inhalt oder Bestätigungsmeldung.
Focus Trap in Modals
Wenn ein Modal/Dialog offen ist, darf der Fokus nicht auf den darunter liegenden Seiteninhalt wandern. Die Implementierung einer Focus Trap hält den Fokus innerhalb des Dialogs: Tab und Shift+Tab zirkulieren durch die interaktiven Elemente im Dialog, Escape schließt den Dialog.
Fokus-Indikator
Der Fokus-Indikator zeigt visuell welches Element den Keyboard-Fokus hat. Er ist für Tastaturnutzer das Äquivalent zum Maus-Cursor — ohne ihn ist Navigation blind. WCAG 2.4.7 (Level AA) verlangt einen sichtbaren Fokus-Indikator. WCAG 2.4.11 (WCAG 2.2, Level AA) präzisiert: der Fokus-Indikator darf nicht vollständig von anderen Elementen überdeckt werden.
Keyboard-Patterns für komplexe Komponenten
Navigation / Mega-Menü
Enter oder Space öffnet ein Untermenü. Pfeiltasten navigieren durch die Menüpunkte. Escape schließt das aktuelle Untermenü. Tab verlässt die Navigation komplett. aria-expanded auf dem Trigger zeigt Zustand. Alle Menüpunkte sind per Tab oder Pfeiltasten erreichbar.
Modals und Dialogs
Beim Öffnen: Fokus auf ersten interaktiven Inhalt oder Dialog-Titel. Focus Trap aktiv — Tab zirkuliert innerhalb des Dialogs. Escape schließt den Dialog. Beim Schließen: Fokus zurück auf auslösendes Element. role='dialog' und aria-modal='true' auf dem Dialog-Container.
Tabs
Tab-Liste: Pfeiltasten navigieren zwischen Tabs (nicht Tab-Taste). Tab-Taste verlässt die Tab-Liste und geht zum Tab-Inhalt. Enter/Space aktiviert Tab. aria-selected zeigt aktiven Tab. Nur der aktive Tab ist per Tab erreichbar (roving tabindex).
Akkordeons
Enter oder Space auf dem Trigger öffnet/schließt den Inhalt. Tab navigiert durch die Trigger. aria-expanded auf Trigger zeigt Zustand. Optionales Verhalten: Pfeiltasten zwischen Triggern. Alle Trigger und Inhalte sind Tab-zugänglich.
Dropdowns / Comboboxen
Enter öffnet die Liste. Pfeiltasten navigieren durch Optionen. Enter wählt aus. Escape schließt ohne Auswahl. Eingabe filtert Optionen (bei Combobox). aria-expanded, aria-haspopup, aria-activedescendant für korrekte Screenreader-Ausgabe.
Häufig gestellte Fragen
Wie teste ich Tastaturnavigation?
Maus weglegen und nur mit Tastatur durch die Website navigieren. Tab durch alle interaktiven Elemente. Alle Funktionen (Menü öffnen, Formular ausfüllen, Modal schließen) per Tastatur ausführen. Prüfen: Ist der Fokus immer sichtbar? Ist die Tab-Reihenfolge logisch? Gibt es unbeabsichtigte Focus Traps?
Was ist der Unterschied zwischen :focus und :focus-visible?
:focus gilt immer wenn ein Element den Fokus hat — auch bei Mausklick. :focus-visible gilt nur wenn der Fokus per Tastatur (oder programmatisch) gesetzt wurde. Empfehlung: :focus-visible für den Fokus-Indikator nutzen. Das versteckt den Fokusring für Mausnutzer (die ihn nicht brauchen) und zeigt ihn für Tastaturnutzer.
Muss jeder Link in der Navigation per Tab erreichbar sein?
Ja — alle interaktiven Elemente müssen per Tastatur erreichbar sein. Bei großen Navigationsmenüs kann das sehr viele Tab-Schritte bedeuten. Skip Links (Zum Hauptinhalt) und Keyboard-Shortcuts (z.B. Pfeiltasten in Menüs) verbessern die Usability.
Was ist ein Roving Tabindex?
Ein Pattern für Komponenten mit mehreren Elementen (Tab-Liste, Toolbar, Menü) bei dem nur ein Element der Gruppe einen tabindex='0' hat (und damit per Tab erreichbar ist) und alle anderen tabindex='-1' haben. Innerhalb der Gruppe wird mit Pfeiltasten navigiert. Verhindert dass Tastaturnutzer durch jedes Element tabben müssen.