UX-Glossar · engl. Keyboard Accessibility
Tastaturbedienung
Tastaturbedienung bedeutet, dass sich eine Website oder App vollständig ohne Maus bedienen lässt. Für viele Menschen mit Behinderungen ist das die Voraussetzung, um ein Angebot überhaupt nutzen zu können.
Stell dir vor, du willst in einem Onlineshop bestellen, aber deine Hand ist nach einer Verletzung eingegipst. Eine Maus kannst du nicht bedienen, also drückst du die Tabulatortaste. Ein Rahmen springt durch das Menü, dann verschwindet er irgendwo im Banner. Welcher Button gerade aktiv ist, siehst du nicht mehr. Der Warenkorb bleibt unerreichbar.
Genau das soll Tastaturbedienung verhindern.
Einfach erklärt
Tastaturbedienung bedeutet, dass sich eine Website oder App vollständig ohne Maus und ohne Touchscreen nutzen lässt. Ein Vergleich aus dem Alltag: Ein Gebäude mit Treppe und Aufzug ist für alle erreichbar. Gibt es nur die Treppe, bleiben manche Menschen draußen. Die Tastatur ist für viele digitale Angebote dieser Aufzug.
Darauf angewiesen sind zum Beispiel Menschen mit motorischen Einschränkungen, Menschen, die mit einem Screenreader arbeiten, und alle, die Sondertastaturen, Schalter oder Sprachsteuerung nutzen. Viele Profis arbeiten außerdem einfach lieber mit der Tastatur, weil es schneller geht.
Die wichtigsten Tasten sind schnell erklärt: Mit Tab springst du zum nächsten bedienbaren Element, mit Umschalt und Tab zurück. Enter löst Links und Buttons aus, die Leertaste Buttons und Checkboxen. Mit den Pfeiltasten bewegst du dich innerhalb von Menüs, Radiobuttons oder Tabs, mit Escape schließt du Dialoge.
Was die WCAG verlangen
Die WCAG (Web Content Accessibility Guidelines) machen daraus prüfbare Kriterien. Die wichtigsten:
- 2.1.1 Tastatur (Stufe A): Jede Funktion muss per Tastatur bedienbar sein. Ausnahme sind nur Funktionen, bei denen der Weg der Bewegung zählt, etwa freies Zeichnen.
- 2.1.2 Keine Tastaturfalle (Stufe A): Der Fokus darf nirgends hängen bleiben. Du musst jedes Element auch wieder verlassen können.
- 2.4.7 Fokus sichtbar (Stufe AA): Es muss erkennbar sein, welches Element gerade den Fokus hat, also auf Eingaben reagiert.
- 2.4.11 Fokus nicht verdeckt (Stufe AA, neu in WCAG 2.2): Das fokussierte Element darf nicht vollständig von Inhalten wie Sticky-Headern oder Cookie-Bannern verdeckt sein.
Dazu kommt 2.4.1 (Stufe A): Wiederkehrende Blöcke wie die Navigation müssen sich überspringen lassen. Die gängigste Lösung ist ein Skip-Link, also ein Link „Zum Inhalt springen“, der beim ersten Tab-Druck erscheint und direkt zum Hauptinhalt führt.
Ein Beispiel
Ein Beispiel: Ein Buchungsportal baut seine Datumsauswahl aus klickbaren div-Elementen. Per Tab erreichst du sie gar nicht, und der Fokusrahmen wurde per CSS mit outline: none entfernt, weil er „unschön“ aussah. Für Menschen ohne Maus endet die Buchung hier.
Nach der Überarbeitung sind die Tage echte Buttons, die Pfeiltasten wechseln zwischen den Tagen, und ein kräftiger Fokusrahmen in der Markenfarbe zeigt die Position. Die Funktion ist dieselbe, aber jetzt kommen alle ans Ziel. Warum solche Details zählen, zeigt der Artikel Warum Barrierefreiheit mehr als Kontrast und Größe ist.
In der Praxis
- Leg die Maus weg. Geh deine wichtigsten Abläufe nur mit Tab, Enter, Leertaste und Escape durch. Das dauert Minuten und deckt viele Probleme auf.
- Nutze native Elemente. Echte Buttons, Links und Formularfelder sind von Haus aus per Tastatur bedienbar. Eigene Komponenten brauchen zusätzliche Tastatursteuerung und oft ARIA.
- Gestalte den Fokus, statt ihn zu entfernen. Ein gut sichtbarer Fokusrahmen gehört ins Design System. Weitere Prüfmethoden findest du im Artikel Accessibility-Prüfung: Werkzeuge und Methoden für UX-Designer.
Verwandte Begriffe
Barrierefreiheit, WCAG, Screenreader, ARIA