Vollständige Tastatur-Navigation
Jede Funktion ist erreichbar ohne Maus. Das ist wichtig für Nutzer von Bildschirmlesegeräten. Es hilft auch allen anderen.
Was bedeutet „Vollständige Tastatur-Navigation"?
Tastatur-Navigation bedeutet: Man kann jede Funktion auf einer Website mit bestimmten Tasten bedienen. Dazu gehören Tab, Enter, Space, Pfeiltasten und Esc. Keine Maus ist nötig. Funktionen dürfen nicht nur mit Maus funktionieren. Effekte, die nur beim Drübergehen mit der Maus sichtbar sind, dürfen nicht die einzige Möglichkeit der Bedienung sein.
Pflicht und Nutzen — WCAG 2.1.1.
Die Regel WCAG 2.1.1 (Keyboard) ist eine Pflicht. Ohne Tastatur-Bedienung kann eine Seite nicht von Bildschirmlesegeräten oder Personen mit Bewegungseinschränkungen benutzt werden. Auch erfahrene Nutzer brauchen das. Zusätzlich gilt Regel 2.1.2 (No Keyboard Trap). Der Fokus muss immer wieder aus jedem Bereich herauskommen. Karussells, Modals und spezielle Dropdowns sind die häufigsten Probleme.
Wie wir es konkret lösen.
- Alle Buttons sind
<button>oder<a href="…">(nicht<div onclick>). - Tab-Reihenfolge entspricht der Lese-Reihenfolge — kein willkürliches
tabindex. - Karussells: Pfeiltasten + ESC-Pause; Modals: Fokus-Trap mit ESC-Close + Fokus-Rückgabe.
- Hover-Menüs haben einen tastatur-aktivierbaren Klick-Trigger.
- Test im Tastatur-Walkthrough vor jeder Freigabe — siehe Verifikations-Checkliste.
Verwandte Bausteine unserer Modulsuite
-
AAA-Kontraste, geprüft pro Komponente
WCAG 1.4.6≥ 7:1 für Text, ≥ 4,5:1 für große Schrift — geprüft pro Komponente, nicht pro Page-Stichprobe.
-
Leichte Sprache (KI-gestützt)
WCAG 3.1.5Inhalte auf Knopfdruck vereinfacht — für Menschen mit Lese-Einschränkungen, Sprachlerner und Eilige.
-
KI-Alttext-Generator
WCAG 1.1.1Kein „Bild ohne Beschreibung" mehr. KI liefert den ersten Entwurf — Redaktion verfeinert.
-
Heading-Hygiene & Struktur-Manager
WCAG 1.3.1Saubere Outline für Screenreader und Suchmaschinen — eine H1 pro Page, keine Sprünge.
Brauchen Sie genau dieses Modul?
15 Minuten für ein erstes Gespräch. Wir klären, ob das für Ihre Seite wichtig ist. Weitere Infos: Übersicht zur Barrierefreiheit, unser Leistungsangebot, BAFA-Förderung und häufig gestellte Fragen.
