casoon Keyboard-Navigation-Review
Prüft, ob eine Komponente/Seite vollständig und nachvollziehbar per Tastatur bedienbar ist.
Wann verwenden
- Interaktive UI (Menüs, Modals, Tabs, Dropdowns, Formulare) soll auf Tastaturzugang geprüft werden.
Input
- Komponenten-Code oder Seite (Pfad).
- Optional: erwartete Bedien-Flows.
Prüf-Vorgehen
- Alle interaktiven Elemente per Tab erreichbar und in visueller Reihenfolge?
- Sichtbarer Fokus:
:focus-visible-Style vorhanden, keinoutline:noneohne gleichwertigen Ersatz. - Kein positiver
tabindex(tabindex="1+"zerstört die Reihenfolge). Erlaubt:0und-1. - Keine Tastatur-Falle: Fokus lässt sich immer weiterbewegen (v.a. iframes, Custom-Widgets).
- Modals/Overlays: Focus-Trap aktiv, ESC schließt, Fokus kehrt danach zum Auslöser zurück.
- Custom-Widgets: erwartete Tasten implementiert (Enter/Space bei Buttons, Pfeiltasten bei Menü/Tabs).
- Kein Fokusverlust nach Interaktion (z.B. Element entfernt → Fokus fällt auf
<body>).
Output
Je Finding:
- Problem: was per Tastatur nicht geht.
- Ort: Element/Interaktion.
- Fix: Snippet (Handler,
tabindex, Focus-Management). - Priorität: hoch (nicht bedienbar) / mittel / niedrig.
Gotchas
outline:noneohne Ersatz ist der häufigste Fehler — Fokus wird unsichtbar.div/spanals Button: brauchtrole,tabindex="0"UND Key-Handler für Enter und Space.- Nach Schließen eines Modals muss der Fokus zurückgesetzt werden, sonst springt er an den Seitenanfang.
- Positiver
tabindexgewinnt gegen DOM-Reihenfolge — verwirrend und fehleranfällig. - Hover-only-Interaktionen sind per Tastatur nicht erreichbar.