Standards · WCAG 2.2

SC 2.1.1 Stufe A WCAG 2.0

Tastatur

Jede Funktion der Seite muss allein per Tastatur bedienbar sein – ohne erforderliche Mausbewegungen, Ziehgesten oder spezifisches Timing. Screenreader-, Switch- und Spracheingabe-Nutzende sind gleichermaßen auf diese Grundvoraussetzung angewiesen.

Was gefordert wird

Alle Funktionen des Inhalts müssen über eine Tastaturschnittstelle bedienbar sein, ohne dass spezifisches Timing für einzelne Tastenanschläge erforderlich ist. Nutzende müssen jedes interaktive Element mit der Tab-Taste erreichen, es mit Enter oder Leertaste aktivieren und komplexe Widgets mit den Pfeiltasten sowie anderen standardisierten Tastenkombinationen bedienen können.

Es gibt zwei enge Ausnahmen: Eingaben, die vom Pfad der Bewegung abhängen (Freihandzeichnen, Dokumentenunterzeichnung) und nicht nur von den Endpunkten, sowie Eingaben, die eine analoge reale Handlung spiegeln, bei der der Pfad wesentlich ist.

Umsetzung

  • Native interaktive Elemente verwenden (<button>, <a href>, <input>, <select>) – sie sind standardmäßig tastaturbedienbar.
  • Für benutzerdefinierte Widgets aus <div> oder <span>: role, tabindex="0" und Tastaturhandler für Enter, Leertaste, Escape und Pfeiltasten je nach Muster ergänzen.
  • Den ARIA Authoring Practices Guide für Menüs, Tabs, Kombinationsfelder, Dialoge und Baumansichten befolgen – für jedes Muster ist ein definiertes Tastaturinteraktionsmodell festgelegt.
  • Für jede rein mausbasierte Geste ein Tastaturäquivalent bereitstellen: Drag-and-Drop braucht eine Umsortierung-per-Schaltflächen-Alternative, reiner Hover-Menüs müssen per Klick geöffnet werden können, Wisch-Karussells benötigen Vorwärts-/Rückwärts-Schaltflächen.
  • Testen, indem die Maus abgesteckt und der gesamte Ablauf durchgegangen wird.

Häufige Fehler

  • <div onclick> ohne role="button", tabindex="0" oder Tastaturhandler – für Tastaturnutzende unsichtbar.
  • Benutzerdefinierte Dropdown-Listen, bei denen zwar der Auslöser erreichbar ist, die Optionen aber nicht mit den Pfeiltasten navigiert werden können.
  • Drag-and-Drop-Kanban-Boards, Datei-Upload-Bereiche oder Canvas-Werkzeuge ohne Tastaturalternative.
  • Modal-Schließen-Schaltflächen, die zwar vorhanden sind, aber keinen Escape-Tastaturhandler besitzen.
  • Tooltips und Menüs, die nur per Hover erscheinen und unter Tastaturfokus nie sichtbar werden.
  • Karussells und Bildgalerien, die nur per Wischen oder Klick auf Indikatoren ohne tabindex bedienbar sind.

axe und Lighthouse melden fehlende tabindex-Werte und fehlende zugängliche Namen, können aber nicht prüfen, ob ein benutzerdefiniertes Dropdown tatsächlich auf Pfeiltasten reagiert – dieser Teil erfordert manuelle Tests.

Bedeutung

Dies ist das wichtigste Erfolgskriterium für die Bedienbarkeit. Screenreader-Nutzende navigieren per Tastatur. Switch-Nutzende emulieren eine Tastatur. Spracheingabe-Nutzende geben Befehle aus, die auf Tastaturereignisse abgebildet werden. Erfahrene Nutzende mit RSI-bedingten Einschränkungen sind ebenfalls darauf angewiesen. Eine Website, die 2.1.1 nicht erfüllt, schließt effektiv alle aus, die keine Maus verwenden können – und diese Gruppe ist deutlich größer als die offensichtliche.