2.1 Tastaturzugänglichkeit

WCAG - Definition

Menschen müssen eine Website vollständig mit der Tastatur bedienen können – ganz ohne Maus, Touchscreen oder andere Zeigegeräte. Das betrifft nicht nur Navigation, sondern auch alle Funktionen und Interaktionen (z. B. Formulare ausfüllen, Buttons anklicken, Menüs bedienen).

Die Tastatur ist ein zentrales Werkzeug für viele Nutzer*innen – etwa für blinde Menschen mit Screenreader, Menschen mit motorischen Einschränkungen oder Power-User, die effizient navigieren möchten.

Bedeutung

Eine barrierefreie Website darf nicht voraussetzen, dass Nutzer*innen eine Maus bedienen können. Für viele ist das nicht möglich oder nicht praktikabel.

Gute Tastaturzugänglichkeit ist daher eine Grundvoraussetzung für:

  • Menschen mit motorischen Einschränkungen

  • Nutzer*innen von Screenreadern

  • Menschen mit Zittern oder eingeschränkter Handkontrolle

  • Entwickler*innen, die mit Tastenkombinationen arbeiten

  • Mobile Nutzer*innen mit externer Tastatur

Fehlt die Tastaturbedienbarkeit, ist die Website für ganze Personengruppen unbenutzbar.

Ausreichende Techniken

  • Verwende semantisch korrektes HTML (z. B. <button>, <a>, <input>).

  • Nutze tabindex="0" für benutzerdefinierte Komponenten, damit sie fokussierbar sind.

  • Vermeide Tastaturfallen – z. B. durch Modale, die man nicht mit Escape oder Tab verlassen kann.

  • Entwickle Komponenten so, dass alle Funktionen über Tastatur zugänglich sind (z. B. Menüs mit Pfeiltasten bedienbar).

  • Implementiere sichtbare Fokusanzeige.

Beratungstechniken

  • Teste regelmäßig mit nur der Tastatur: Tab, Umschalt+Tab, Enter, Leertaste, Pfeiltasten, Escape.

  • Nutze Screenreader-Tests, um sicherzustellen, dass interaktive Elemente erreichbar sind.

  • Prüfe, ob neue Komponenten (z. B. eigene Slider, Tabs) auch ohne Maus vollständig funktionieren.

  • Entwickle und dokumentiere Fokus-Management: Wo landet der Fokus nach Öffnen/Schließen eines Modals?

Häufige Fehler

  • Wichtige Funktionen nur per Maus zugänglich (onclick ohne Tastatur-Alternative).

  • Interaktive Komponenten (z. B. Slider, Tabs), die nicht fokussierbar sind.

  • Fokus verschwindet beim Navigieren oder ist nicht sichtbar.

  • Modal-Dialoge, die sich nicht schließen lassen, weil der Fokus darin gefangen ist.

  • Inhalte, die beim Tabben übersprungen oder ausgelassen werden.