Der Fokusindikator ist die sichtbare Markierung des Elements, das gerade die Tastatureingabe entgegennimmt. Browser setzen dafür von Haus aus einen Rahmen; wer ihn gestaltet, muss ihn ersetzen und nicht entfernen.
- Fokusindikator
Sichtbare Markierung des Elements, das gerade die Tastatureingabe entgegennimmt.
Beispiel: „Der Fokusindikator ist ein drei Pixel breiter Rahmen mit zwei Pixeln Abstand zum Element.“Auch: Fokusring. Gemeint ist die Darstellung; der Fokus selbst ist der Zustand dahinter, also die Frage, welches Element gerade dran ist.
Abgrenzung zum Hover-Zustand: Der Hover-Zustand zeigt, wo der Mauszeiger steht, und verschwindet mit ihm. Der Fokus bleibt, bis ein anderes Element ihn übernimmt, und ist der einzige Anhaltspunkt für alle, die ohne Maus arbeiten.
Wie er aussehen muss
Erkennbar auf jedem Untergrund, auf dem das Element vorkommt. Die Richtlinien verlangen eine Fläche von mindestens zwei Pixeln Stärke entlang des Elements und einen Kontrast von 3 zu 1 gegenüber der Farbe im unfokussierten Zustand. Ein heller Rahmen auf hellem Grund erfüllt das nicht.
Die Mindestanforderung steht im Erfolgskriterium Fokus sichtbar (2.4.7), die genauen Maße in dem 2023 hinzugekommenen Kriterium zum Erscheinungsbild des Fokus. Letzteres gehört zur Stufe AAA und ist damit nicht verbindlich, beschreibt aber, was tatsächlich erkennbar ist.
/* ersetzt den Standardrahmen, statt ihn zu entfernen */
:focus-visible {
outline: 3px solid #0078ff;
outline-offset: 2px;
}
/* auf dunklem Grund braucht es die Gegenfarbe */
.dunkler-bereich :focus-visible {
outline-color: #ffffff;
}Warum focus-visible und nicht focus
Der Browser setzt den Fokus auch beim Klicken mit der Maus. Früher führte das zu Rahmen an Stellen, an denen sie niemand erwartet hatte, und genau deshalb wurden sie reihenweise abgeschaltet. Die Bedingung focus-visible löst das: Sie greift bei Tastaturbedienung und bleibt beim Mausklick weg.
Damit entfällt der alte Zielkonflikt. Wer heute den Rahmen entfernt, nimmt ihn allen weg, die ohne Maus arbeiten, ohne dafür einen gestalterischen Grund zu haben.
Woran es in der Praxis scheitert
An einer einzigen Zeile im Stylesheet. Ein pauschales outline: none am Anfang einer Datei macht jede Tastaturbedienung unbrauchbar, und weil nichts kaputt aussieht, fällt es bei der Abnahme niemandem auf.
Aus unserer Arbeit an über 2.500 Website-Projekten ist das der häufigste Barrierefreiheitsfehler überhaupt. Er lässt sich in Sekunden prüfen: Seite laden, einmal die Tabulatortaste drücken, hinsehen.