Einer der grundlegenden Aspekte bei der Erstellung barrierefreier Websites ist die Barrierefreiheit der Tastaturnavigation, denn nicht jeder navigiert mit einer Maus oder einem Touchscreen durch das Web.

Für viele Benutzer, einschließlich derer mit motorischen Einschränkungen, Sehbehinderungen oder Power-User, die eine effiziente Navigation bevorzugen, ist die Tastatur das wichtigste Werkzeug für die Interaktion mit Websites.

Wichtig: Bitte beachte, dass die Informationen in diesem Artikel nur Vorschläge sind und keine Rechtsberatung darstellen. Jegliche Haftung im Zusammenhang mit der Nutzung der bereitgestellten Information ist ausgeschlossen. Es wird keine Gewähr für die Richtigkeit, Vollständigkeit und Aktualität der Informationen übernommen. Wir raten dir, dass du dich bei Unklarheiten oder Fragen rechtlich beraten lässt.

Was ist Barrierefreiheit der Tastaturnavigation?

Barrierefreiheit der Tastaturnavigation bedeutet, dass alle interaktiven Elemente auf einer Website oder in einer Anwendung allein mit der Tastatur zugänglich und bedienbar sind, ohne dass eine Maus benötigt wird.

Dies beinhaltet:

• Navigieren durch Links, Buttons, Formularfelder und Widgets mit Hilfe von Tab, Umschalt + Tab, Enter, Leertaste, Pfeiltasten und anderen Tastaturbefehlen.
• Eindeutige Kennzeichnung, welches Element den Fokus hat.
• Sicherstellen, dass alle Funktionen (wie das Öffnen eines Menüs oder das Absenden eines Formulars) über die Tastatur verfügbar sind.

Best Practices für die Barrierefreiheit der Tastaturnavigation

1. Logische Tab-Reihenfolge sicherstellen
   Interaktive Elemente sollten bei der Verwendung der Tabulatortaste einem logischen Fluss folgen. Das bedeutet, dass die Tab-Reihenfolge mit der visuellen und strukturellen Reihenfolge des Inhalts übereinstimmen sollte.
    
2. Alle interaktiven Elemente fokussierbar machen
   Elemente wie Buttons, Links, Formulareingaben und benutzerdefinierte Widgets müssen fokussierbar und über die Tastatur bedienbar sein.
    
3. Sichtbaren Fokus sicherstellen
   Die Besucher müssen sehen können, welches Element gerade den Fokus hat. Das Design des Fokus ist durch den verwendeten Browser vorgegeben. Du kannst den Stil des Fokusumrisses aber mit benutzerdefiniertem Code anpassen. Wenn möglich, vermeide es, die Fokusumrandung zu entfernen (mit CSS wie outline: none), es sei denn, du ersetzt sie durch eine eigene sichtbare Alternative. Achte auch darauf, dass die Fokusumrandung nicht von anderen Elementen beeinträchtigt oder überlappt wird, sei also vorsichtig, wenn du z. B. overflow: hidden für ein übergeordnetes Element verwendest.

Wir arbeiten daran, dass alle klickbaren Elemente in Sections und Templates standardmäßig einen sichtbaren Fokus haben. Wir empfehlen jedoch, deine Website vor der Veröffentlichung gemäß den oben aufgeführten Best Practices zu prüfen.