Tastaturnavigation – Barrierefreie Bedienung ohne Maus
Tastaturnavigation bezeichnet die Möglichkeit, eine Website oder Webanwendung vollständig über die Tastatur zu bedienen – ohne Einsatz der Maus. Sie ist ein zentrales Kriterium der WCAG und Voraussetzung für barrierefreies Webdesign.
Viele Nutzer:innen mit motorischen Einschränkungen, Sehbehinderungen oder Bildschirmlesegeräten sind auf die Tastatursteuerung angewiesen.
Wichtige Tasten für die Navigation
| Taste | Funktion |
|---|---|
| Tab | Zum nächsten fokussierbaren Element |
| Shift + Tab | Zum vorherigen Element |
| Enter / Space | Aktion auslösen (z. B. Link, Button) |
| Esc | Modale schließen, Menüs verlassen |
| Pfeiltasten | In Menüs, Listen, Tabs navigieren |
Was laut WCAG erfüllt sein muss
- Alle interaktiven Elemente müssen mit Tab erreichbar sein
- Fokus sichtbar machen (outline, :focus-visible)
- Logische Fokusreihenfolge (keine Sprünge, kein Fokusverlust)
- Keine Fokusfallen (z. B. modale Dialoge ohne Escape-Möglichkeit)
- Keine Mauspflicht für Funktionen
Best Practices
- Standard-HTML-Elemente nutzen (<button>, <a>, <input>)
- Keine divs oder spans „klickbar“ machen, ohne Tastatursteuerung
- Bei Custom-UI: tabindex, aria-*, role korrekt setzen
- Fokusindikatoren nicht entfernen! (z. B. outline: none)
- Mit echter Tastatur testen – nicht nur per DevTools
Tools zum Testen
- Keyboard-only Browsing im echten Browser
- axe DevTools
- VoiceOver (macOS) oder NVDA (Windows)
- WCAG Quickref: Keyboard Guidelines
Mehr zu unseren Leistungen im Bereich Digitale Barrierefreiheit erfahren Sie hier.
