Nicht jeder Besucher führt eine Maus. Manche steuern das Web allein über die Tastatur, andere über einen Screenreader oder per Sprachbefehl. Sie alle springen mit der Tab-Taste von Element zu Element, bestätigen mit der Eingabetaste und schließen mit Escape.
Funktioniert das auf Deiner Seite nicht, ist ein Teil Deiner Besucher schlicht ausgesperrt. Den wichtigsten Test machst Du in zwei Minuten selbst, ganz ohne Werkzeug. Und seit dem BFSG ist saubere Tastatur-Bedienung für viele Seiten ohnehin gesetzliche Pflicht aus dem BFSG.
Wer auf die Tastatur angewiesen ist
Tastatur-Bedienung klingt nach einem Randthema, betrifft aber eine große Gruppe. Menschen mit motorischen Einschränkungen können eine Maus oft nicht präzise führen. Was sich für diese Gruppe noch verbessern lässt, vertieft der Beitrag dazu, wie sich eine Seite auch ohne ruhige Hand bedienen lässt. Blinde Nutzer sehen den Mauszeiger gar nicht und navigieren komplett über Tastatur und Screenreader.
Dazu kommen alle, die zeitweise ohne Maus arbeiten: am Laptop ohne externe Maus, mit einer Verletzung am Arm, oder einfach aus Gewohnheit, weil die Tastatur schneller ist. Wer für die Tastatur baut, hilft also einer überraschend großen Gruppe. Jeder profitiert davon, der in dem Moment keine Maus zur Hand hat. Wie sich das in die Grundlagen der Barrierefreiheit einfügt, zeigt der übergeordnete Beitrag.
Was Tab, Enter und Escape bedeuten
Die Tastatur-Bedienung läuft über wenige Tasten, und die solltest Du kennen, bevor Du Deine Seite prüfst. Mit jedem Druck auf Tab wandert die Markierung zum nächsten bedienbaren Element: zum nächsten Link, zur nächsten Schaltfläche, ins nächste Eingabefeld.
- Tab: springt vorwärts zum nächsten bedienbaren Element.
- Shift + Tab: springt rückwärts zum vorigen Element.
- Enter oder Leertaste: löst aus, was gerade markiert ist (ein Link wird gefolgt, ein Knopf gedrückt).
- Escape: schließt geöffnete Fenster, Menüs und Banner.
Mehr braucht ein Besucher nicht, um durch Deine ganze Seite zu kommen. Genau deshalb fällt sofort auf, wenn eine dieser Tasten irgendwo ins Leere greift.
Eine logische Reihenfolge
Tab folgt einer festen Spur über die Seite. Die Markierung wandert von einem Element zum nächsten, und diese Reihenfolge sollte dem entsprechen, was der Besucher vor sich sieht. Springt sie quer über die Seite, verliert er die Orientierung.
Das prüfst Du gut beim Selbsttest: Wenn die Markierung erst oben links steht, dann unten rechts, dann wieder in der Mitte, stimmt die Reihenfolge nicht. Sie sollte von oben nach unten und von links nach rechts laufen, so wie man liest. Eine saubere Überschriften-Hierarchie hilft zusätzlich, denn Screenreader-Nutzer springen oft direkt von Überschrift zu Überschrift.
Der sichtbare Fokus
Wer mit der Maus klickt, sieht, wo er gerade ist. Wer tabbt, braucht dafür eine sichtbare Markierung. Browser zeichnen dafür von Haus aus einen Rahmen oder Ring um das gerade aktive Element, damit man es auf einen Blick erkennt. Woran Du einen guten Fokus erkennst und warum er oft weggeräumt wird, zeigt der Beitrag dazu, wo Du beim Tabben gerade stehst.
Ein häufiger Fehler: Dieser Rahmen wird abgeschaltet, weil ihn jemand als störend empfindet. Dann tabbt der Besucher blind durch die Seite und sieht nicht mehr, wo er steht. Das ist eine der häufigsten Hürden überhaupt, und sie fällt im Maus-Betrieb niemandem auf.
Achte beim Selbsttest darauf, ob jedes markierte Element deutlich hervorgehoben ist. Ein blasser Schimmer reicht nicht, die Markierung muss ins Auge springen. Wenn Du irgendwo tabbst und nicht erkennst, wo Du gelandet bist, hast Du eine Baustelle gefunden, und einen klaren Auftrag an Deine Agentur.
Skip-Links sparen lange Tab-Wege
Oben auf jeder Seite stehen meist Logo und Navigation. Ein Tastatur-Nutzer muss sich auf jeder Unterseite erst durch alle Menüpunkte tabben, bevor er beim eigentlichen Inhalt ankommt. Bei einem großen Menü sind das schnell zwanzig Tastendrücke pro Seite.
Ein Skip-Link löst das. Er ist die allererste Station beim Tabben, normalerweise unsichtbar, und taucht beim ersten Druck auf Tab auf. Seine Beschriftung lautet etwa „Zum Inhalt springen". Ein Druck auf Enter, und die Markierung landet direkt im Hauptinhalt.
Der Aufwand ist gering, der Gewinn groß. Wer den Link in verständlicher Sprache beschriftet, macht zusätzlich klar, was passiert. So sparst Du jedem Tastatur-Nutzer auf jeder Seite Dutzende überflüssige Tastendrücke.
Tastatur-Fallen in Pop-ups und Menüs
Manche Bausteine fangen die Markierung ein und geben sie nicht mehr her. Das nennt sich Tastatur-Falle. Ein typischer Fall ist ein Pop-up oder Cookie-Banner, das aufgeht, sich aber per Escape nicht schließen lässt und den Besucher festhält.
Bei einem Fenster, das sich über die Seite legt, gilt die umgekehrte Regel: Solange es offen ist, soll die Markierung im Fenster bleiben und nicht dahinter verschwinden. Wichtig ist nur, dass Escape es zuverlässig schließt und die Markierung danach dorthin zurückkehrt, wo sie vorher war.
Auch Aufklapp-Menüs sind heikel. Geht ein Untermenü nur auf, wenn die Maus darüberfährt, bleibt es für die Tastatur unerreichbar. Solche Menüs müssen auch auf Tab und Enter reagieren, sonst fehlt ein ganzer Teil Deiner barrierefreien Navigation. Mit derselben Logik bedienen sich auch Links und Buttons, die für alle erreichbar sein sollen.
In zwei Minuten selbst testen
Den wichtigsten Test machst Du ohne Werkzeug. Klick einmal oben in die Adresszeile des Browsers und leg die Maus dann zur Seite. Ab jetzt bedienst Du Deine Seite nur noch mit der Tastatur und gehst sie einmal komplett durch.
Achte dabei auf drei Fragen. Kommst Du mit Tab überall hin, auch in Pop-ups und Untermenüs? Siehst Du jederzeit, wo die Markierung gerade steht? Kommst Du aus jedem Fenster mit Escape wieder heraus? Besonders knifflig wird das bei aufklappenden Bausteinen, weshalb Du einen Datums- und Zeit-Picker per Tastatur bedienbar halten solltest. Wo eine Antwort Nein lautet, hast Du eine Baustelle gefunden.
Diese drei Fragen sind auch die, die Du Deiner Agentur stellst. Lass Dir zeigen, dass die Seite sich komplett ohne Maus bedienen lässt, die Markierung überall sichtbar bleibt und kein Fenster zur Falle wird. Damit hast Du ein Abnahme-Kriterium in der Hand, das jeder nachprüfen kann.
Fazit — bedienbar bleibt, was man bedienen kann
Tastatur-Navigation ist die Grundlage dafür, dass Deine Seite für alle funktioniert. Ein sichtbarer Fokus, eine logische Reihenfolge und ein Skip-Link decken schon den größten Teil ab.
Mach den Zwei-Minuten-Test heute einmal selbst. Du wirst überrascht sein, wie viel sich mit kleinen Korrekturen verbessert, und wie viele Besucher davon profitieren, ohne dass es jemals jemand laut sagt.