2.1.1 Keyboard

WCAG - Definition

Alle Funktionen der Website müssen ausschließlich mit der Tastatur (ohne Maus oder Touch) nutzbar sein.

Das gilt für:

  • Navigation (z. B. durch Menüs, Links)

  • Interaktionen (z. B. Buttons, Formulare, Dialoge)

  • Steuerung (z. B. Tabs, Slider, Akkordeons)

Ausreichende Techniken

G90 – Alle Funktionalität über Tastatur erreichbar

Verwende native HTML-Elemente, die automatisch tastaturbedienbar sind.

Gute Beispiele:

<button onclick="doSomething()">Klicken</button>  <!-- mit Tastatur erreichbar -->
<a href="/seite.html">Link</a>                    <!-- immer per Tab erreichbar -->
<input type="text" name="email">                  <!-- Fokusierbar -->

Diese Elemente haben von Haus aus Fokus- und Tastaturverhalten.

Scripting-Techniken

Wenn du eigene Komponenten baust, z. B. einen div Button oder ein eigenes Menü, musst du ARIA + Tastaturverhalten nachbauen.

Beispiel: „Pseudo-Button“ zugänglich machen

<div role="button" tabindex="0" onclick="doSomething()" onkeydown="if(event.key==='Enter'||event.key===' '){doSomething()}">
  Klick mich
</div>

  • role="button": Sagt dem Screenreader: „Ich bin ein Button“
  • tabindex="0": Macht das Element mit Tab erreichbar
  • onkeydown: Ermöglicht Ausführung per Enter oder Leertaste

Beratungstechniken (Advisory Techniques)

G202 Keine Mauspflicht – alle Interaktionen müssen auch per Tastatur funktionieren
G105 Verwende semantisch korrekte HTML-Elemente, z. B. <button>, <a>, <label>
G21 Wenn Skripte nötig sind, stelle sicher, dass Tastatur-Eingaben ebenfalls behandelt werden
G165 Verwende tabindex nur sinnvoll: 0 für interaktive Elemente, -1 für nicht-tab-relevantes (aber fokusierbar per JS)

Fehler

  • Wichtige Funktion ist nur mit Maus erreichbar, z. B. ein div mit onclick, aber kein tabindex oder onkeydown
  • Tastaturbenutzer bleiben in Fokus-Falle gefangen (z. B. Modal ohne Escape oder Fokusausgang)
  • Benutzer können ein Element nicht fokussieren (fehlender tabindex oder Fokusverlust)
  • Eine Funktion erwartet nur Mausaktionen (z. B. Drag & Drop ohne Alternative)

Entwickler-Checkliste

  • alle interaktiven Elemente mit Tab erreichbar sind

  • Enter oder Space erwartungsgemäß funktionieren

  • keine Funktion ausschließlich per Maus erreichbar ist

  • Fokus sichtbar ist (kombinierbar mit 2.4.7)

  • Fokus nicht stecken bleibt (z. B. in Overlays)

Praktische Tipps für Entwickler

Eigene Schaltflächen - Nutze role="button" + tabindex="0" + keydown für Enter/Space
Modale Dialoge - Setze Fokus beim Öffnen und schließe mit ESC
Slider/Carousel - Biete Pfeiltastensteuerung an (keydown)
Drag & Drop - Biete auch Tastatur-Alternativen wie Up/Down/Enter