Wie du deine Website für Tastatursteuerung barrierefrei zugänglich machst

autor: Shantu A. Bhattacharjee

15.09.2025

Teilen auf :

Ein praxisnaher Leitfaden – für bessere Usability, für mehr Inklusion und für spürbare Sichtbarkeit. Mit klarer Checkliste, echten Praxisbeispielen zu digitaler Barrierefreiheit im Internet sowie den häufigsten Fehler-Beispielen.

Themenübersicht

Tastatursteuerung:

Tab - zum nächsten oder voherigen interaktiven Element springen
Enter - zum nächsten oder voherigen interaktiven Element springen
↑ - Vorheriges Thema auswählen
↓ - Nächstes Thema auswählen

Eine kurze Geschichte über gebrochene Arme, leere Akkus und gute UX

Stell dir vor, du warst ein Wochenende lang Skifahren. Alles super – bis du im letzten Abstieg auf der Piste stürzt. Diagnose: Fraktur des rechten Arms.

Du hast vor, dein Hotelzimmer umzubuchen, und öffnest das Buchungsportal. Dabei stellst du fest, wie abhängig du von der Mouse bist – und kommst schließlich nicht weiter.

Weil der Warenkorb sich nicht per Tab erreichen lässt.
Weil das Menü keine sichtbare Markierung zeigt.
Weil der ‚Jetzt buchen‘-Button nur über Hover funktioniert.

Und plötzlich wird dir klar: Tastaturbedienung ist für uns alle relevant.

Es muss nicht immer ein gebrochener Arm sein, der dich vor solche Herausforderungen stellt …

Du hast eine Sehnenscheidenentzündung und deine Hand schmerzt akut …
Du sitzt auf deinem Koffer im Gang des überfüllten Zuges und kannst dein Touchpad oder die Mouse nicht benutzen …
Der Akku deiner Mouse verabschiedet sich, während du gerade ein Formular ausfüllst …
Oder du bist einfach jemand, der gern per Tab navigiert, weil du es als effizienter erlebst.

Tastaturnavigation ist kein Nice-to-have. Sie ist eine digitale Grundversorgung.

Wie funktioniert Tastatur-Navigation überhaupt?

Tasten auf der Tastatur	Was sie bewirken
Tabulator-Taste (Tab)	springt Schritt für Schritt von einem interaktiven Element zum nächsten, darunter Buttons, Links, Eingabefelder.
Shift + Tab	springt zurück auf das vorherige interaktive Element.
Enter	aktiviert das fokussierte Element (wie ein Mausklick).
Escape (ESC)	schließt Dialoge, Modalfenster oder Menüs – wenn’s gut programmiert wurde.
Pfeiltasten	ermöglichen das Navigieren in Menüs, Slidern, Drop-downs, Grids, Tabellen – wenn diese dementsprechend entwickelt wurden.

Und jetzt wird’s spannend: Was passiert in der Realität?

Hier trennt sich die Spreu vom Weizen. Denn viele Websites funktionieren nur halbwegs mit Tastatur oder gar nicht. Drei typische Probleme bei der Nutzung von Tastaturnavigation sind z. B. folgende:

1. Es gibt keinen sichtbaren Fokus: Du tabulierst, aber du siehst nicht, wo du bist.
Grund dafür: Ein Fokus-Zustand (:focus) fehlt, ist unsichtbar oder wurde im CSS entfernt.

2. Die Fokus-Reihenfolge springt zickzack durch die Seite.
Gründe dafür: HTML-Elemente wurden nicht logisch verschachtelt oder der Tab-Index (tabindex) wurde falsch vergeben.

3. Du landest in einer Tastatur-Sackgasse.
Wie das? Du öffnest z. B. ein modales Fenster, aber ESC schließt es nicht und Tab verlässt es nicht. Du steckst also fest. Dieses Problem nennt man Fokus-Falle, und genau das ist dein Zugangsproblem!

Digitale Barrierefreiheit

Gute Tastaturbedienung führt, erklärt und unterstützt

Fünf Beispiele, die zeigen, wie gute Tastaturnavigation aussehen kann:

1. Toast Messages
Toast-Nachrichten sind kleine Hinweise, die dir zeigen, welche Tasten du nutzen kannst, so erscheint z. B. beim Aktivieren der Tastatursteuerung der Hinweis ‚Tastatur-Modus aktiviert‘ oder …

… ‚S‘ für Suche,
‚ESC‘ zum Schließen,
‚Pfeil vorwärts‘ und ‚Pfeil rückwärts‘ für Slider,
‚ENTER‘ zum Überspringen der Navigation.

2. Navigation mit den Pfeiltasten
Mit den Pfeiltasten springst du schrittweise in Slidern, Menüs, Karussells, Akkordeons. Statt zehnmal die Tab-Taste zu betätigen, nutzt du einfach die Tasten ‚Pfeil vorwärts‘ und ‚Pfeil rückwärts‘.

3. Die Suchfunktion als Shortcut anlegen
Der Shortcut für die Suche mit dem Kurzbefehl auf der Buchstaben-Taste ‚S‘ für ‚Search‘ spart Zeit und schafft Orientierung. Er muss aber klar kommuniziert werden (z. B. als Legende oder Toast-Message).

4. Legenden und Aktivierungshinweise
Beginnt ein Nutzer mit der Tastatur zu interagieren, wird eine Legende mit den Befehlstasten zur Navigation angezeigt. Zusätzlich erscheinen Aktivierungshinweise, was ausgewählt wurde, z. B. ‚Tastatursteuerung aktiv – Hilfe anzeigen mit H‘.

5. Formulare, Grids, Widgets
Alle Formulare, Grids, Tabellen sind mit Tab-Taste, den Pfeiltasten und der Enter-Taste steuerbar. Dazu gehören auch sichtbare/auslesbare Labels, ein kontextgerechter Fokus und eine Escape-Logik, um Fokus-Fallen zu vermeiden.

Wie du deine Website auf Tastatur-Zugänglichkeit testest

Mit klarer Checkliste, echten Praxisbeispielen und den häufigsten Fehlerquellen. Mit der manuellen Checkliste testest du die Tastaturbedienung auf deiner Website richtig:

Tab starten

Komme ich durch alle interaktiven Elemente?

Fokus erkennen

Sehe ich immer deutlich, wo ich gerade bin?

Logische Reihenfolge

Entspricht die Fokusführung der visuellen Struktur?

Enter testen

Löst das fokussierte Element die erwartete Aktion aus?

Shift + Tab rückwärts

Kann ich problemlos zurücknavigieren?

ESC schließt Layer

Funktioniert die ESC-Taste bei Modalfenstern, Pop-ups, Menüs etc?

Custom Components erreichen

Lassen sich Tabs, Slider, Akkordeons etc. per Tab und Pfeiltasten bedienen?

Short-cuts erklären

Gibt es einen Hinweis oder eine Legende, wenn bspw. ‚S‘ für ‚Suche‘ verwendet wird?

Zurück nach oben

Gibt es am Seitenende eine Tastaturfunktion, um wieder an den Anfang zu springen?

Navigation direkt anspringen

Gibt es eine Tastenkombination, um die Hauptnavigation gezielt zu erreichen?

Tools, die dir beim Testen helfen

Manuelle Tests sind Pflicht, aber es gibt ein paar digitale Tools, die dir dabei helfen, deine Website zu prüfen und schneller zu analysieren:

Browser-DevTools zeigen dir per Tab-Index-Overlay Fokusreihenfolgen.
axe-DevTools (Chrome/Firefox Extension) erkennen fehlende Fokus-Zustände und per Tab steuerbare Elemente.
WAVE Accessibility Tool checkt auch Farbkontraste und ARIA-Zuweisungen.
Focus Visible Polyfill simuliert und visualisiert Tastaturfokus in komplexen Layouts.
NVDA und VoiceOver kombinieren Tests mit Screenreader und Tastatur (realitätsnah!).

Typische Fehlerquellen

Der Fehler “outline:none;” im CSS: Der Fokus ist zwar da, aber unsichtbar.
Modalfenster, die kein aria-modal oder keinen Fokusfang haben.
Nicht-native HTML-Komponenten (div statt button).
Links ohne href, Buttons ohne type.
Fokus springt nach dem Schließen eines Layers nicht zurück zum auslösenden Element.
Navigationselemente außerhalb der logischen Reihenfolge.
Interaktive Elemente im Display: none statt aria-hidden.

Gesetzlich relevant: Tastaturbedienung ist Pflicht

Die Möglichkeit, eine Website vollständig mit der Tastatur zu bedienen, ist Bestandteil der gesetzlichen Anforderungen an Barrierefreiheit.

Seit dem 28. Juni 2025 gilt: Wenn du digitale Inhalte für Verbraucher anbietest – egal ob Shop, Karriereseite, Buchungs- oder Infoportal – deine Seite muss auch ohne Mouse vollständig nutzbar sein. Dazu gehören: Fokus sichtbar machen, sinnvolle Reihenfolge, keine Sackgassen, ESC muss funktionieren, interaktive Komponenten müssen reagieren. Und ja: Das alles gehört auch in die Barrierefreiheitserklärung.

Warum genau, was es bedeutet, und welche Folgen das Ignorieren haben kann, erfährst du in unserem Insight ‚https://www.aleksundshantu.com/insight/rechtliche-konsequenzen-barrierefreiheit/Rechtliche Konsequenzen: Was passiert, wenn du die nötige Barrierefreiheit deiner Website ignorierst?

Zum Insight

Fazit

Tastaturnavigation ist keine Pflichtübung – sie ist der Weg zu echter digitaler Reife

Vielleicht erinnerst du dich an den Anfang dieser Seite: an den gebrochenen Arm, den leeren Mouse-Akku – Situationen, in denen Tastaturnavigation plötzlich zur einzigen Option wird. Es sind Momente wie diese, in denen sich zeigt, wie gut eine Website wirklich gestaltet worden ist.

Denn Barrierefreiheit – besonders Tastaturzugänglichkeit – bedeutet nicht nur, dass alle „mitgemeint“ sind. Sie bedeutet: Funktion. Klarheit. Struktur. Sorgfalt. Qualität.

Und sie wirkt weit über Menschen mit dauerhaften Einschränkungen hinaus.
Sie verbessert die Usability für alle:

für Menschen, die schnell und effizient online unterwegs sein wollen,
für solche, die viel mit der Tastatur arbeiten,
für Nutzer mit Seh- oder Motorik-Einschränkungen,
für Suchmaschinen, die semantisch kluge Seiten besser verstehen,
für deine Conversion – weil gut geführte Interaktionen seltener abbrechen.

Tastaturbedienbarkeit ist heute ein Kriterium guter UX – und nunmehr auch ein gesetzlicher Standard. Aber sie kann noch mehr sein: Wenn man sie mitdenkt, wenn man sie gestaltet, wenn man sie testet. Wir sprechen dann von Keyboard-UX.

Keyboard-UX ist eine Haltung, nicht nur einer Anforderung!

Wir zeigen dir, wie’s geht

Wir denken barrierefreies Webdesign und barrierefreie Webentwicklung weiter.

Melde dich bei uns!

+49 30 40045775

Hier findest du themenverwandte Artikel: