Eine Website, die nicht per Tastatur bedienbar ist, verstößt gegen WCAG 2.1.1 — eines der wichtigsten Level-A-Kriterien der WCAG-Richtlinien. Dieser Artikel erklärt, was Tastaturnavigation bedeutet, wer sie braucht und wie Sie Ihre Website in 20 Minuten selbst testen können.
Was ist Tastaturnavigation?
Tastaturnavigation bedeutet: Jede Funktion, die mit einer Maus erreichbar ist, muss auch ausschließlich mit der Tastatur erreichbar sein. Das umfasst:
- Links anklicken (Tab + Enter)
- Formulare ausfüllen und abschicken
- Dropdown-Menüs öffnen und schließen
- Modals und Dialoge bedienen
- Tabs, Akkordeons, Karussells steuern
- Datei-Uploads initiieren
WCAG 2.1.1 (Keyboard, Level A) sagt: "All functionality of the content is operable through a keyboard interface." Es gibt keine Ausnahme für "schwierige" UI-Patterns.
Die wichtigsten Tastaturbefehle
| Taste | Funktion |
|---|---|
| Tab | Zum nächsten interaktiven Element springen |
| Shift + Tab | Zum vorherigen interaktiven Element springen |
| Enter | Link oder Button aktivieren |
| Space | Button aktivieren, Checkbox togglen, Seite scrollen |
| Pfeiltasten ↑↓←→ | In Komponenten navigieren (Radiobuttons, Select, Tabs) |
| Escape | Modal schließen, Dropdown schließen, Abbrechen |
| Home / End | Zum ersten / letzten Element in einer Liste |
Fokus-Indikatoren: Sichtbar machen, wo Sie sind
Der Fokus-Indikator zeigt, welches Element gerade aktiv ist — wie der Mauszeiger für Tastaturnutzer. WCAG 2.4.7 (Level AA) fordert, dass der Fokus-Indikator sichtbar ist. WCAG 2.4.11 (Level AA, neu in WCAG 2.2) fordert zusätzlich eine Mindestgröße.
Häufigster Fehler: outline: none
Das ist der häufigste Barrierefreiheitsfehler bei Tastaturnavigation. Designer entfernen den Browser-Standard-Fokusring, weil er "hässlich" aussieht — und vergessen, einen neuen zu definieren:
/* FALSCH: Entfernt Fokus-Indikator komplett */
* { outline: none; }
a:focus { outline: none; }
/* RICHTIG: Eigenen Fokus-Indikator definieren */
:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 2px;
border-radius: 2px;
}
/* Für dunkle Hintergründe: */
.dark-section :focus-visible {
outline-color: #ffffff;
}WCAG 2.4.11 fordert: Der Fokus-Bereich muss mindestens 2 CSS-Pixel umfassen. Der Kontrast des Fokus-Indikators zur Umgebung muss mindestens 3:1 betragen.
Skip-Links: Die Navigation überspringen
Ein Skip-Link ist ein unsichtbarer Link, der beim ersten Tab-Druck sichtbar wird und direkt zum Hauptinhalt springt. Ohne ihn müssen Tastaturnutzer auf Seiten mit großen Navigationsbereichen dutzende Male Tab drücken, um zum Inhalt zu gelangen.
<!-- HTML: Am Anfang des <body> -->
<a href="#main-content" class="skip-link">
Zum Hauptinhalt springen
</a>
<nav>...</nav>
<main id="main-content">...</main>
/* CSS */
.skip-link {
position: absolute;
top: -100%;
left: 1rem;
padding: 0.5rem 1rem;
background: #005fcc;
color: white;
font-weight: bold;
border-radius: 0 0 4px 4px;
z-index: 9999;
}
.skip-link:focus {
top: 0;
}Tab-Reihenfolge: Logisch und vorhersehbar
Die Tab-Reihenfolge sollte der visuellen Reihenfolge und der Lesereihenfolgeder Seite entsprechen (WCAG 1.3.2, 2.4.3). Probleme entstehen durch:
- tabindex mit positiven Werten:
tabindex="1",tabindex="2"usw. — erzeugen eine künstliche Reihenfolge, die mit der visuellen nicht übereinstimmt. Vermeiden. - CSS-Reorder mit Flexbox/Grid: Wenn Elemente visuell umgeordnet werden (order: 2), folgt der Fokus der DOM-Reihenfolge — nicht der visuellen. Das kann zu verwirrenden Sprüngen führen.
- Modals ohne Fokus-Trap: Wenn ein Modal geöffnet wird, muss der Fokus hineingehen und drin bleiben — bis das Modal geschlossen wird.
Manuelle Tastaturtest-Checkliste
Führen Sie diesen Test durch — ohne Maus:
Tab durch die gesamte Seite: Ist jedes interaktive Element (Links, Buttons, Formulare) erreichbar?
Ist der Fokus-Indikator immer sichtbar und ausreichend groß?
Ist die Tab-Reihenfolge logisch (links-rechts, oben-unten)?
Skip-Link: Beim ersten Tab erscheint er, Enter springt zum Hauptinhalt?
Hauptnavigation: Dropdown-Menüs per Tastatur öffnen/schließen/navigieren?
Formulare: Alle Felder erreichbar, Fehler nach Submit per Tastatur korrigierbar?
Modals: Öffnen per Enter, Fokus geht rein, Escape schließt, Fokus kommt zurück?
Karussells/Slider: Steuerung per Tastatur möglich?
Video-Player: Alle Steuerelemente (Play, Pause, Lautstärke) per Tastatur bedienbar?
Kein Fokus-Trap (Fokus bleibt nicht dauerhaft in einem Bereich stecken)?
Häufige Tastaturnavigations-Probleme und ihre Lösung
Benutzerdefinierte Dropdown-Menüs
Div-basierte Menüs ohne ARIA sind für Tastaturnutzer unsichtbar. Lösung: Verwenden Sie das WAI-ARIA Disclosure-Pattern mit button + aria-expanded + aria-controls.
Datums-Picker und komplexe Widgets
Viele Datepicker-Bibliotheken sind nicht tastaturzugänglich. Wählen Sie Bibliotheken, die das ARIA Dialog-Pattern oder Grid-Pattern korrekt implementieren (z.B. React DayPicker).
Infinite Scroll ohne Tastatur-Unterbrechung
Wenn neue Inhalte automatisch geladen werden, muss der Fokus managebar bleiben. Bieten Sie alternativ einen "Mehr laden"-Button an.
Tastaturnavigation automatisch testen
Unser Scanner erkennt viele häufige Tastaturnavigations-Probleme automatisch — fehlende Fokus-Indikatoren, falsche tabindex-Werte und mehr. Starten Sie den kostenlosen Scan.
Website kostenlos auf Tastaturnavigation prüfen →