Wer eine Website mit der Tastatur bedient, muss erkennen können, welches Element gerade aktivierbar ist. Ein sichtbarer Fokus ist dafür unverzichtbar. Eine gut gestaltete Oberfläche berücksichtigt deshalb neben dem Ruhezustand auch Navigation, Aktivierung und Rückkehr.
Die USWDS-Vorschau zeigt Zustände nebeneinander
In der Dokumentation der USWDS-Button-Komponente stehen verschiedene Darstellungszustände nebeneinander. Dazu gehört ein ausdrücklich als Fokuszustand dargestelltes Beispiel. Die zusätzliche Kontur unterscheidet sich vom bloßen Farbwechsel eines Hover-Zustands.
Ein statisch dargestellter Fokus erklärt die Gestaltung. Ob er beim tatsächlichen Tabben korrekt erscheint und sichtbar bleibt, muss gesondert geprüft werden. Dazu gehört die gesamte Seite mit ihren überlagernden Elementen.
Zwei Fragen statt einer Umrandung
Erstens: Ist jedes notwendige Element erreichbar und bedienbar? Zweitens: Ist dabei sichtbar, wo du dich befindest? Eine deutliche Kontur hilft nicht, wenn ein eigener Dropdown per Tastatur gar nicht geöffnet werden kann. Umgekehrt ist eine technisch erreichbare Schaltfläche ohne erkennbare Position schwer nutzbar.
W3C SC 2.4.7 beschreibt die Sichtbarkeit des Tastaturfokus. SC 2.4.11 behandelt Fälle, in denen fokussierte Komponenten durch vom Autor erzeugte Inhalte vollständig verdeckt werden. Ein feststehender Header oder Dialog kann hier relevant sein.
Ein Rundgang ohne Maus
Beginne in der Adressleiste, lege die Maus zur Seite und drücke Tab. Gehe durch Navigation, Inhalt, Formulare und Footer. Gehe mit Shift+Tab auch zurück. Öffne Menüs, Dialoge und ausklappbare Bereiche. Prüfe jeweils, ob du sie wieder verlassen kannst und ob die Reihenfolge zum sichtbaren Aufbau passt.
Wenn ein Dialog geschlossen wird, sollte ein nachvollziehbarer Fokuspunkt erhalten bleiben. Wenn eine Fehlermeldung erscheint, brauchst du einen verständlichen Weg zur Korrektur. Der Beitrag über Fehlerzusammenfassungen zeigt einen solchen Zusammenhang.
Den Fokus nicht für die Optik opfern
Entferne den Browserfokus nicht pauschal mit CSS, nur weil die Linie in einem Entwurf stört. Wenn du ihn ersetzt, muss die Alternative in allen relevanten Hintergründen sichtbar sein. Prüfe helle und dunkle Flächen sowie überlagernde Elemente.
Die Tastaturprüfung ist ein wichtiger manueller Test, aber kein vollständiger Barrierefreiheitsaudit. Ergänze sie um Struktur, Beschriftungen, Kontrast und die tatsächlichen Aufgaben deiner Besucher. Eine Liste bestandener Einzelchecks sollte nicht mehr versprechen, als geprüft wurde.
Fokus zeigt die aktuelle Bedienposition
Beim Navigieren mit der Tastatur fehlt der Mauszeiger als Hinweis auf die aktuelle Stelle. Der Fokus übernimmt diese Orientierung. Er sollte deshalb sichtbar von normalen, ausgewählten und nur mit der Maus berührten Zuständen unterschieden werden können. Eine ausgewählte Registerkarte und ein gerade fokussierter Button beschreiben unterschiedliche Dinge.
Ein zusätzlicher Rahmen kann diese Unterscheidung unterstützen, sofern er auf allen vorgesehenen Hintergründen erkennbar bleibt. Prüfe ihn neben hellen Flächen, dunklen Buttons und Bildern. Eine einzige Farbe ohne Betrachtung des Umfelds kann an manchen Stellen verschwinden. Der Indikator darf außerdem nicht durch eng gesetzte übergeordnete Bereiche abgeschnitten werden.
Die Reihenfolge muss zur Aufgabe passen
Eine sichtbare Markierung hilft wenig, wenn der Fokus in einer unverständlichen Reihenfolge springt. Prüfe den Weg vom Seitenanfang durch Navigation, Inhalt und Formulare. Die Reihenfolge sollte dem nachvollziehbaren Aufbau folgen. Zusätzliche künstliche Tab-Reihenfolgen können dabei neue Widersprüche erzeugen, besonders wenn sich das Layout auf kleinen Bildschirmen verändert.
Bei eingeblendeten Dialogen entsteht eine eigene Bedienumgebung. Es muss klar sein, wo der Fokus beginnt, wie die Inhalte erreicht werden und wohin er nach dem Schließen zurückkehrt. Ein visuell korrekt platzierter Dialog ist noch kein verlässlich bedienbarer Dialog. Teste den gesamten Wechsel einschließlich Abbruch.
Verdeckte Elemente bleiben ein Problem
Ein fixierter Kopfbereich kann einen fokussierten Link verdecken, obwohl die Seite ihn technisch angesprungen hat. Ähnliche Probleme entstehen durch Cookie-Hinweise oder andere feststehende Flächen. Prüfe die tatsächliche Sichtbarkeit beim Tabben und nicht nur, ob das Element im Dokument einen Fokus erhält.
Beginne einen Test ohne Maus und löse eine konkrete Aufgabe: Artikel finden, Suchdialog öffnen, Ergebnis auswählen und zur Ausgangsseite zurückkehren. Notiere jeden Moment, in dem die aktuelle Position unklar wird. Wiederhole den Ablauf mit Vergrößerung. So zeigt sich, ob die Fokusgestaltung auch dann trägt, wenn weniger Inhalt gleichzeitig sichtbar ist.
Ein konkreter Anwendungsfall ist die Umschaltung zum Anzeigen eines Passworts. Auch dieser kleine Schalter muss erreichbar sein, seinen Zweck erklären und den Fokus nachvollziehbar erhalten.
