WCAG 2.1 Tastaturnavigation

Lerne, wie du jede Funktion deiner Website komplett per Tastatur bedienbar machst – inklusive Checkliste, Shortcut-Tipps & BFSG-Deadline 28. 06. 2025.

Mehr lesen
Illustration: Tastaturbedienung nach WCAG 2.1

WCAG 2.1 Tastaturzugänglichkeit 

– Dein kompletter Guide

Kurz erklärt: Ab dem 28. Juni 2025 verpflichtet das Barrierefreiheits­stärkungs­gesetz (BFSG) viele Unternehmen, alle digitalen Angebote ohne Maus nutzbar zu machen. 
Dieser Guide zeigt dir Schritt für Schritt, wie du die vier WCAG-Erfolgskriterien zur Tastaturbedienung erfüllst und Stolperfallen vermeidest.

1. Was bedeutet Tastaturzugänglichkeit?

Tastaturzugänglichkeit heißt, dass jede Funktion einer Webseite – Navigation, Formulare, Mediaplayer, Drag-&-Drop-Aktionen u. v. m. – vollständig mit der Tastatur (oder einem Keyboard-Emulator) steuerbar ist. So können Menschen ohne Maus oder Touchscreen, z. B. mit Seh- oder motorischen Einschränkungen, deine Seite problemlos nutzen. Die WCAG fassen das unter Guideline 2.1 Keyboard Accessible zusammen w3.org.

2. Die vier WCAG-Erfolgskriterien im Überblick

WCAG-Kriterium Kernaussage Praxis-Tipps

2.1.1 Keyboard  | Jede Funktion ist per Tastatur bedienbar, ohne Zeitdruck (w3.org)  | Logische Fokus‐Reihenfolge (tabindex sparsam einsetzen)

2.1.2 No Keyboard Trap  | Kein „Fokus-Gefängnis“ – Nutzer dürfen nie in einem Element festhängen (w3.org)  | Modals mit ESC schließen, Off-Canvas-Menüs richtig „ent-trappen“

2.1.3 Keyboard (No Exception)  | Keine Ausnahmen: Auch komplexe Widgets brauchen Tastatur-Support  | Alternativen zu Drag-&-Drop (z. B. Auf/Ab-Buttons) bereitstellen

2.1.4 Character Key Shortcuts  | Ein-Tasten-Shortcuts müssen abschalt- oder änderbar sein  | Settings-Dialog anbieten; aria-keyshortcuts dokumentieren

Stell dir vor, deine Website ist ein Haus mit vielen Zimmern. Manche Menschen – zum Beispiel Nutzer*innen, die keine Maus benutzen können – kommen nur über die Tastatur durch die Türen. Damit sie sich überall frei bewegen können, gibt es vier zentrale Regeln aus den WCAG-Richtlinien:

Erstens: Jede Tür muss sich mit der Tastatur öffnen lassen, und zwar stressfrei. Das bedeutet: Mit der Tab-Taste oder den Pfeiltasten kannst du jeden Link, jede Schaltfläche und jedes Formularfeld erreichen, ohne dass dabei eine Uhr mitläuft.

Zweitens: Niemand darf in einem Zimmer feststecken. Wenn ein Pop-up aufgeht oder ein Menü hineinschiebt, muss es sich per Esc-Taste wieder schließen, damit der Fokus – also der leuchtende Rahmen um das gerade aktive Element – nicht gefangen bleibt.

Drittens: Es gibt keine Ausnahmen. Auch ausgefallene Elemente wie Zeichen- oder Drag-and-Drop-Funktionen brauchen einen Weg, per Tastatur gesteuert zu werden. Kannst du etwas mit der Maus ziehen, solltest du es alternativ mit Auf- und Ab-Buttons oder Ähnlichem verschieben können.

Viertens: Wenn du Ein-Tasten-Kurzbefehle anbietest, müssen Nutzer*innen sie abschalten oder umstellen können – sonst drückt jemand versehentlich „S“ und löst etwas Ungeplantes aus. Gib ihnen einfach einen kleinen Einstellungsdialog dafür.

Kurz gesagt: Sorge dafür, dass man deine Seite komplett mit der Tastatur bedienen kann, niemand in Sackgassen landet, keine Funktion außen vor bleibt und Einzel-Kurzbefehle anpassbar sind. So fühlen sich alle willkommen – ganz ohne technisches Vorwissen.

3. Typische Stolperfallen & schnelle Lösungen

Datumspicker ohne Textfeld
→ ergänze ein natives <input type="date">.

Individuelle Slider
→ Pfeiltasten + aria-valuenow implementieren.

Video-Player ohne Shortcuts
→ überprüfe unsere Anleitung Audio & Video barrierefrei initiative-barrierefreiheit.de.

Fokus nicht sichtbar
→ minimum 3:1-Kontrast für den Fokus-Ring, kein Entfernen via outline: none.

Manchmal verstecken sich auf Webseiten kleine Stolpersteine, die Menschen ohne Maus oder mit Seh- bzw. Motorik­einschränkungen ausbremsen. Ein häufiges Beispiel ist der klassische Kalender­ausklapper: Wenn der „Datumspicker“ nur als buntes Pop-up erscheint, aber kein ganz normales Textfeld daneben anbietet, können Nutzer das gewünschte Datum nicht einfach tippen. Die schnelle Lösung lautet deshalb: Ergänze ein gewöhnliches Eingabefeld vom Typ „Datum“, damit jeder das Datum auch per Tastatur eingeben kann.


Ähnlich verhält es sich bei individuell gestalteten Schiebereglern, etwa für Lautstärke oder Preisfilter. Können diese Regler nur mit der Maus hin- und hergeschoben werden, bleiben Tastatur­nutzer außen vor. Sorge hier dafür, dass die Pfeiltasten den Wert verändern und ein unsichtbares Etikett („aria-valuenow“) den aktuellen Stand an Vorlese-Programme übermittelt.

Auch Video-Player haben ihre Tücken: Ohne Tastatur-Kurzbefehle wird das Anhalten, Vorspulen oder Laut-Schalten mühsam. Prüfe deshalb, ob sich dein Player mit Tasten wie Leertaste (Play/Pause) oder „M“ (Mute) bedienen lässt – und orientiere dich an Leitfäden zur barrierefreien Einbindung von Audio & Video.

Schließlich darf der sichtbare Fokus – der kleine Rahmen, der anzeigt, wo sich die Tastatur gerade befindet – nie verschwinden. Ein Kontrast von mindestens 3 : 1 zum Hintergrund macht ihn deutlich erkennbar. Entferne den Fokusring also nicht per CSS („outline: none“) oder ersetze ihn nur durch eine gut sichtbare Alternative.

Kurz gesagt: Gib Menschen immer eine Tipp-Alternative zum Klicken, statte Spezial-Elemente mit Tastatur­funktionen aus, liefere klare Shortcuts für Medien­player und lass den Fokus gut sichtbar. Damit räumst du die größten Barrieren im Handumdrehen aus dem Weg.

4 Step-by-Step-Checkliste

  1. Fokus-Reihenfolge testen (Tab vorwärts, Shift + Tab zurück).
  2. Sichtbaren Fokus stilisieren (CSS-Klasse für :focus-visible).
  3. Kein Element ohne Tastatur-Handler (role="button" → Enter & Space).
  4. Tastaturkürzel dokumentieren & konfigurierbar machen.
  5. User-Tests: reine Tastatur + Screenreader.
  6. Automatischer Audit: axe oder Lighthouse – siehe Tools für KMUs initiative-barrierefreiheit.de.


Um herauszufinden, ob deine Seite wirklich gut mit der Tastatur bedienbar ist, kannst du dir das wie eine kleine Prüfung in sechs einfachen Schritten vorstellen. Zuerst wanderst du einmal komplett mit der Tab-Taste vorwärts und mit Shift+Tab rückwärts durch die Seite. So merkst du sofort, ob die Reihenfolge logisch ist oder ob du plötzlich von oben nach unten springst. Dann schaust du, ob der Fokus – also der kleine Rahmen, der die aktuelle Stelle markiert – immer gut sichtbar bleibt. Er sollte deutlich hervorstechen, damit niemand den Überblick verliert.<

Als Nächstes stellst du sicher, dass jedes anklickbare Element auch mit Enter oder Leertaste funktioniert. Das betrifft vor allem Eigenbau-Buttons oder verlinkte Bilder. Danach notierst du alle Tastaturkürzel, die deine Seite anbietet, und gibst den Nutzer eine einfache Möglichkeit, diese Befehle umzuschalten oder auszuschalten, falls sie stören.

Im vorletzten Schritt lässt du echte Menschen die Seite nur mit der Tastatur und einem Screenreader ausprobieren. Ihre Rückmeldung zeigt dir sofort, wo noch Hürden versteckt sind. Zum Schluss startest du ein automatisches Prüfwerkzeug wie axe oder Lighthouse. Diese Tools geben dir einen kompakten Bericht und schlagen Verbesserungen vor, die du direkt abarbeiten kannst. Befolgst du diese sechs Schritte, bist du schon einen großen Schritt näher an einer wirklich barrierefreien Website.

5 Gesetz & Deadlines

  • BFSG: Gilt ab 28. 06. 2025 für E-Commerce, Bank- & Beförderungs­dienste u. a.
  • BITV 2.0: Für öffentliche Stellen sofort verbindlich.

 Mehr Details findest du in unserem Artikel zu den gesetzlichen Grundlagen initiative-barrierefreiheit.de.


6 Weiterführende Ressourcen

Zum Schluss noch einmal in aller Kürze: Wenn deine Website komplett mit der Tastatur bedienbar ist, können alle Menschen sie ohne Hindernisse nutzen – egal ob sie eine Maus haben oder nicht. Oft reichen schon kleine Änderungen wie sichtbare Fokus-Rahmen, eindeutige Tastenkombinationen und ein paar zusätzliche Eingabefelder, um große Wirkung zu erzielen. Teste die Seite regelmäßig selbst mit Tab-Taste und Screenreader; so spürst du Probleme sofort auf. Erinner dich dabei immer daran: Barrierefreiheit ist kein Spezialfeature, sondern ganz normales Qualitätsmerkmal – und sie macht dein Angebot zugleich rechtssicher, nutzerfreundlich und besser auffindbar bei Google.