Tastaturnavigation
Tastaturnavigation bezeichnet die Möglichkeit, eine Website oder Anwendung vollständig ohne Maus zu bedienen, üblicherweise über die Tab-Taste, Umschalt+Tab, Enter, die Leertaste und die Pfeiltasten.
Kurz erklärt
Beim Navigieren per Tastatur springt der Fokus mit der Tab-Taste der Reihe nach durch alle interaktiven Elemente einer Seite - Links, Buttons, Formularfelder - in der Regel in der Reihenfolge, in der sie im HTML-Dokument stehen. Damit das funktioniert, müssen zwei Dinge stimmen: Jedes interaktive Element muss per Tastatur überhaupt erreichbar und bedienbar sein, und der aktuelle Fokus muss visuell klar erkennbar sein (der sogenannte Fokus-Indikator, meist ein Rahmen um das fokussierte Element).
Beispiel
Ein Nutzer, der aus motorischen Gründen keine Maus bedienen kann, öffnet ein Dropdown-Menü mit Enter oder der Leertaste, springt mit Tab zum nächsten Menüpunkt und schließt das Menü mit Escape - all das funktioniert nur, wenn diese Interaktionen beim Bau der Komponente tatsächlich implementiert wurden, nicht automatisch allein durch CSS-Styling.
Warum ist das relevant?
Tastaturnavigation betrifft nicht nur Nutzer mit motorischen Einschränkungen: Auch Screenreader-Nutzer bedienen Websites überwiegend per Tastatur, da eine Maus für sie keine sinnvolle Orientierung bietet. Eine Website, die nur per Maus vollständig bedienbar ist, schließt damit gleich mehrere Nutzergruppen aus zentralen Funktionen wie Formularen oder einem Warenkorb aus.
Häufige Missverständnisse
Ein häufiger, aber schwerwiegender Fehler ist es, den sichtbaren Fokus-Indikator per CSS (outline: none) zu entfernen, meist aus rein optischen Gründen - dadurch wird für Tastaturnutzer unsichtbar, welches Element gerade ausgewählt ist. Ebenso besteht der Irrtum, jedes optisch klickbare Element sei automatisch auch per Tastatur bedienbar - ein <div> mit Klick-Handler ist ohne zusätzlichen Code weder fokussierbar noch auf Tastendruck auslösbar, ein natives <button> dagegen schon (siehe semantisches HTML).