Tastatur-Bedienung und Barrierefreiheit

Grundsätzlich ist gefordert, dass alle interagier baren Elemente per Tastatur erreich- und bedienbar sein sollten. Dabei ist es sinnvoll, wenn die Standardtasten funktionieren. Allerdings ist das nicht vorgeschrieben.

Checkliste Tastatur-Bedienung

  • Alle anklickbaren Elemente sind mit der Tastatur erreichbar und können aufgerufen werden.
  • Alle veränderbaren Elemente sind mit der Tastatur veränderbar.
  • Der Fokus der Tastatur ist immer deutlich sichtbar.
  • Die Reihenfolge der Tastatur-Bedienung ist sinnvoll.

Bitte prüfen Sie den Fokus auch bei dynamisch eingeblendeten Elementen wie modalen Dialogen oder aufklappenden Navigationen. Grundsätzlich soll der Fokus auf den modalen Dialog gesetzt werden. Bei aufklappenden Menüs soll der Fokus in das geöffnete Menü absteigen. Hat er das Ende des Menüs erreicht, geht er zum nächsten anklickbaren Element.
Tab Index wird möglichst nicht eingesetzt. Wird Tab Index eingesetzt, sollte der Wert 0 oder negativ (kleiner als 0) sein.
Werden vom Standard abweichende Tastenkürzel verwendet oder stellt die Anwendung eigene Tastenbefehle bereit, müssen diese dokumentiert und leicht auffindbar sein.
Verboten sind Tastaturfallen, das heißt Bereiche, aus denen sich der Fokus nicht mehr heraus bewegen lässt. Dazu zählen insbesondere Frames, programmierte Elemente, WYSIWYG-Editoren oder Bereiche mit endless Scrolling. Bei Letzteren müssen Sie sicherstellen, dass der Nutzer einen Mechanismus erhält, um sich aus dem Scroll-Bereich heraus zu bewegen oder diesen Bereich zu überspringen.

Fokus-Hervorhebung

Der Fokus muss nach WCAG 2.2 mindestens folgende Anforderungen erfüllen:

  • Er muss mindestens zwei Pixel breit sein.
  • Er muss mindestens 3:1 zu angrenzenden Farben haben.
  • Das fokussierte Element muss größtenteils sichtbar sein, d.h. das fokussierte Element darf nicht überwiegend außerhalb des Viewports sein.
  • Der Fokus muss natürlich das Element umrahmen, das heißt, er darf nicht das Element überlagern, das fokussiert ist.

Beim Thema Fokus-Hervorhebung achten Sie bitte besonders auf Hintergrundbilder, Farb-Verläufe und ähnliche Dinge, vor allem wenn sie dynamisch oder durch den Content-Manager verändert werden können. Hier kann praktisch nicht garantiert werden, dass die Anforderungen an den Fokus erfüllt werden. Das lässt sich etwa dadurch beeinflussen, dass das fokussierte Element seine gesamte Farbe verändert.
Empfehlung: Auch wenn das durch die WCAG abgedeckt ist, vermeiden Sie das Invertieren von Farben bei Fokussierung. Das Problem ist, dass viele sehbehinderte Nutzerinnen ohnehin schon mit invertierten Farben arbeiten, zum Beispiel helle Schrift auf dunklem Grund. Wenn Sie Ihrerseits die Farben invertieren, hat die Nutzerin sehr wahrscheinlich eben jene Kombination dunkler Text auf hellem Grund, den sie wegen ihrer Blend-Empfindlichkeit vermeiden wollte.

Wichtigste Tastenkürzel (Windows)

Befehl Wirkung
Tab/Tab + Umschalt Bewegt den Fokus vorwärts bzw. rückwärts
Leertaste Aktiviert/deaktiviert Checkboxen
Pfeiltasten Verändern den Wert von Slidern
Return Löst Buttons aus
Pos1/Ende Bewegt den Fokus an den Beginn bzw. das Ende der Seite
Pfeil rauf/runter Wählt Radio-Buttons aus
Alt + Pfeil runter Öffnet Select-Boxen, mit Pfeil rauf/runter werden Optionen ausgewählt, mit Return wird die Select-Box geschlossen

Fokusmanagement

Fokusmanagement bezieht sich auf die Fähigkeit einer Website oder Anwendung, den Fokus des Benutzers auf den relevanten Inhalt oder die relevanten Funktionen zu lenken. Es geht darum, sicherzustellen, dass Benutzer mit verschiedenen Fähigkeiten und Vorlieben die Informationen und Funktionen finden und nutzen können, die sie benötigen, ohne von unnötigem oder verwirrendem Inhalt abgelenkt zu werden. Durch eine effektive Verwaltung des Fokus können Barrieren für Menschen mit kognitiven Beeinträchtigungen, Sehbehinderungen oder motorischen Einschränkungen reduziert werden.
Zugänglichkeit für Menschen mit Sehbehinderungen: Für Menschen, die auf Bildschirmleseprogramme oder alternative Eingabemethoden angewiesen sind, ist ein klar definierter Fokus entscheidend. Durch das Hervorheben des relevanten Inhalts können sie effektiver navigieren und Informationen erfassen. Das Fehlen eines klaren Fokus kann zu Verwirrung und Frustration führen.
Vereinfachung der Bedienung für Menschen mit motorischen Einschränkungen: Benutzer mit motorischen Einschränkungen, die alternative Eingabemethoden wie Tastaturen oder Sprachsteuerung verwenden, profitieren von einem klaren Fokus auf interaktive Elemente. Durch die richtige Reihenfolge und Hervorhebung können sie leichter zwischen verschiedenen Funktionen wechseln und Aktionen ausführen.
Reduzierung von Ablenkungen und kognitiver Überlastung: Ein effektives Fokusmanagement trägt dazu bei, unnötigen visuellen oder textuellen Ballast zu eliminieren, der Benutzer mit kognitiven Beeinträchtigungen überfordern kann. Durch das Hervorheben wichtiger Informationen und das Reduzieren von visuellem Lärm wird die kognitive Belastung reduziert und die Benutzererfahrung verbessert.

Best Practices für effektives Fokusmanagement:

Klarer visueller Fokus: Verwenden Sie visuelle Hinweise wie Farben, Kontraste oder Umrandungen, um den Fokus auf interaktive Elemente wie Links, Schaltflächen oder Formulare zu lenken. Dies hilft Benutzern, den relevanten Inhalt leichter zu erkennen und zu verstehen. Empfohlen wird ein Fokus von 2 Pixeln Breite und einem Kontrast von mindestens 3:1 zu angrenzenden Farben.
Logische Tab-Reihenfolge: Stellen Sie sicher, dass die Reihenfolge, in der Elemente per Tab-Taste ausgewählt werden, logisch und intuitiv ist. Dies ermöglicht eine einfache Navigation für Benutzer, die Tastaturen oder alternative Eingabemethoden verwenden.
Fokus-Management bei dynamischen Inhalten: Wenn Inhalte sich dynamisch ändern oder aktualisieren, stellen Sie sicher, dass der Fokus auf dem aktualisierten Inhalt bleibt. Benutzer sollten nicht plötzlich den Fokus aufgrund von automatischen Aktualisierungen oder Animationen verlieren.

  • Wenn Elemente wie Dialogboxen neu hinzugefügt werden, sollte der Fokus in der Regel auf das oberste anklickbare Element im neuen Bereich gesetzt werden.
  • Werden Elemente entfernt, soll der Fokus auf das Element gesetzt werden, welches das Einfügen des neuen Elements ausgelöst hat.

Klare Fehlerhinweise: Wenn ein Benutzer bei der Eingabe von Informationen einen Fehler macht, lenken Sie den Fokus deutlich auf den Fehlerhinweis oder die entsprechende Stelle, um die Fehlerbehebung zu erleichtern.
Benutzerfreundliche Tastaturnavigation: Stellen Sie sicher, dass alle interaktiven Elemente mit der Tastatur erreichbar sind und dass der Fokus konsistent und sichtbar bleibt, wenn der Benutzer zwischen den Elementen wechselt.

Anforderungen aus der WCAG

  • Guideline 2.1 Keyboard Accessible
  • Success Criterion 2.4.7 Focus Visible
  • 2.4.11 Focus Not Obscured (Minimum) (AA)
  • 2.4.12 Focus Not Obscured (Enhanced) (AAA)
  • 2.4.13 Focus Appearance (AAA)

Testen

Grundsätzlich sollte die Zugänglichkeit per Tastatur direkt mit der Tastatur getestet werden.
Tab Index ist ein HTML-Attribut. Es kann also gefunden werden, indem Sie einfach im Quelltext danach suchen.
Force Show Keyboard Focus Bookmarklet – hebt den Fokus deutlich hervor
Über den Accessibility Inspector in Firefox können Sie sich die Tab-Reihenfolge anzeigen lassen. Gehen Sie dazu in das Menü „Extras“, dort auf „Browser-Werkzeuge“, dort auf „Werkzeuge für Web-Entwickler“. Wählen Sie in den Werkzeugen „Barrierefreiheit“ und haken Sie anschließend Tab-Reihenfolge anzeigen“ an.

Weiterführende Infos