Redakcja SAT 
Spis treści
Menschen mit motorischen Behinderungen sind beim Navigieren auf Websites oft ausschließlich auf die Tastatur angewiesen. Ist die Tastaturnavigation jedoch schlecht programmiert, wird die Website für sie unbrauchbar. Mit welchen Problemen können Nutzer konfrontiert sein? Vor allem mit mangelnder Sichtbarkeit des Fokus oder einer Keyboard Trap. Damit das Fokusmanagement in HTML/CSS/JS korrekt funktioniert, muss die Website auf die Einhaltung der WCAG-Richtlinien überprüft werden.
Was ist Tastaturzugänglichkeit?
Die Tastaturzugänglichkeit ermöglicht die Navigation auf der Website mithilfe der Tastatur. Dank dieser Funktion können Menschen mit verschiedenen Behinderungen die Internetressourcen in vollem Umfang nutzen. Beispielsweise können Menschen mit eingeschränkter Handbeweglichkeit aufgrund von Erkrankungen wie Arthritis, Muskeldystrophie oder Zerebralparese Schwierigkeiten haben, die Maus präzise zu bedienen. Für sie ist die Tastatur das wichtigste Werkzeug für die Interaktion mit dem Computer.
Wenn eine Website nicht für die Bedienung mit der Tastatur ausgelegt ist, können Nutzer auf Hindernisse stoßen, die ihnen den Zugriff auf Inhalte oder Funktionen der Website unmöglich machen. Die fehlende Möglichkeit der Navigation mit der Tastatur führt zu Frustration, digitaler Ausgrenzung und eingeschränktem Zugang zu Informationen und Dienstleistungen.
WCAG-Tastaturnavigation – wie sieht das in der Praxis aus?
Gemäß den WCAG-Richtlinien (Web Content Accessibility Guidelines) sollte die Navigation mit der Tastatur intuitiv und konsistent sein. Am wichtigsten ist dabei die Tab-Tastenfolge, mit der der Benutzer zwischen interaktiven Elementen der Website wie Links, Schaltflächen oder Formularfeldern wechseln kann. Die Standardreihenfolge der Tab-Navigation soll die logische Anordnung der Inhalte auf der Seite widerspiegeln und dem Benutzer eine vorhersehbare Navigation ermöglichen (z. B. sollte die Tastenkombination Umschalt + Tab zum vorherigen Element zurückkehren).
Um den ausgewählten Fokus zu aktivieren, kann der Benutzer die Eingabetaste oder die Leertaste drücken. Beispielsweise dient die Eingabetaste zum Aktivieren von Links, während die Leertaste zum Markieren von Kontrollkästchen verwendet werden kann.
Darüber hinaus ist es wichtig, die Bedienung anderer Tasten sicherzustellen, wie z. B. Pfeiltasten, mit denen man innerhalb eines Dropdown-Menüs oder einer Auswahlliste navigieren kann.
Sichtbarkeit des Fokus
Der Fokus ist eine visuelle Anzeige, welches Element auf der Seite gerade aktiv und für Interaktionen bereit ist. Dies ist wichtig für sehbehinderte oder ältere Menschen, denen es möglicherweise schwerfällt, aktive Elemente schnell zu finden. Eine deutliche Hervorhebung des Fokus, beispielsweise durch eine Änderung der Rahmenfarbe, des Hintergrunds oder durch Unterstreichungen, hilft den Benutzern zu erkennen, wo sich ihr Fokus gerade befindet.
Wie vermeidet man eine Keyboard-Falle?
Eine Keyboard Trap liegt vor, wenn der Benutzer einen bestimmten Bereich oder Abschnitt einer Seite nicht mit der Standardtastaturnavigation verlassen kann. Um dies zu vermeiden, stellen Sie sicher, dass der betreffende Abschnitt mit der Tabulatortaste oder entsprechenden Tastenkombinationen verlassen werden kann.
Eine Keyboard Trap liegt vor, wenn der Benutzer einen bestimmten Bereich oder Abschnitt einer Seite nicht mit der Standardtastaturnavigation verlassen kann. Um dies zu vermeiden, stellen Sie sicher, dass der betreffende Abschnitt mit der Tabulatortaste oder entsprechenden Tastenkombinationen verlassen werden kann.
Focus Management in HTML/CSS/JS – was sollte noch überprüft werden?
Um die vollständige Verfügbarkeit der Tastaturnavigation zu gewährleisten, sollten Sie Folgendes beachten:
- Tabulatorreihenfolge – eine falsche Reihenfolge kann dazu führen, dass der Fokus auf unvorhersehbare Weise springt, z. B. vom Kopfbereich direkt zum Fußbereich, wobei das Formular übersprungen wird. Um solche Probleme zu vermeiden, sollte auf eine natürliche Hierarchie des HTML-Codes geachtet werden.
- Tabulieren aller Elemente – alle wichtigen interaktiven Elemente wie Schaltflächen, Links, Formularfelder oder Symbole mit Navigationsfunktionen müssen über die Tastatur zugänglich sein. Problematisch können nicht standardmäßige Komponenten sein, z. B. Elemente, die mit dem DIV-Tag anstelle des BUTTON-Tags erstellt wurden und standardmäßig keine Navigation unterstützen. In solchen Fällen muss das Attribut tabindex=“0″ hinzugefügt werden.
- Klickbare Banner, Grafiken – wenn ein Werbebanner oder ein Symbol zu einer anderen Seite weiterleitet, aber beim Tabulieren nicht fokussiert wird, können Benutzer, die eine Tastatur verwenden, es nicht nutzen. Die Lösung besteht darin, solche Elemente als interaktiv zu kennzeichnen (auf die gleiche Weise wie oben).
- Dropdown-Listen – Navigationsmenüs und Auswahllisten in Formularen müssen eine Interaktion über die Tastatur ermöglichen. Das erwartete Verhalten ist die Navigation mit den Pfeiltasten nach oben und unten und die Bestätigung der Auswahl mit der Eingabetaste.
Überprüfung der korrekten Navigation mit der Tastatur
Die Überprüfung, ob eine Website für Benutzer, die eine Tastatur verwenden, vollständig zugänglich ist, kann manuell unter Befolgung der WCAG-Richtlinien durchgeführt werden. Diese Methode ist zwar effektiv, aber zeitaufwändig, insbesondere bei umfangreichen Websites mit vielen Unterseiten. korrekte Navigation mit der Tastatur
Die Lösung des Problems besteht darin, das SAT-Tool zu verwenden, das automatisch die digitale Barrierefreiheit einer Website hinsichtlich der Navigation mit der Tastatur analysiert. SAT führt eine detaillierte Überprüfung der Unterseiten durch, identifiziert potenzielle Fehler und erstellt einen Bericht mit genauen Angaben zu den Stellen, die verbessert werden müssen.
