Focus visible in CSS
Der Tastaturweg bleibt sichtbar
Gutscheinfeld, Einlösen, Produktkarte: drei Stellen in der Kasse.
CSS-Fokuslabor
Wann :focus-visible greift
Der Browser kennt das fokussierte Element. Mit :focus-visible entscheidet er zusätzlich, wann Menschen den Fokus sehen müssen. Diese Landkarte macht beide Zustände auseinanderhaltbar.
Ein Fokus, drei sichtbare Ergebnisse
Konzeptionelle Darstellung. Die genaue Heuristik gehört dem Browser; die gezeigten Ergebnisse sind das übliche Verhalten moderner Browser.
:focus beantwortet: „Welches Element hat Fokus?“ :focus-visible beantwortet: „Soll dieser Fokus jetzt sichtbar markiert werden?“ Entfernen Sie die native Outline nicht global.
Ein Ring für helle und dunkle Flächen
Zwei kontrastierende Farbbänder machen denselben Fokusindikator auf verschiedenen einfarbigen Hintergründen erkennbar. Das Beispiel folgt der W3C-Technik C40. Prüfen Sie bei Bildern und Verläufen zusätzlich jeden betroffenen Hintergrund.
:where(a, button, input, select, textarea):focus-visible {
outline: 2px solid #f9f9f9;
outline-offset: 0;
box-shadow: 0 0 0 4px #193146;
}
@media (forced-colors: active) {
:where(a, button, input, select, textarea):focus-visible {
outline: 3px solid Highlight;
outline-offset: 2px;
box-shadow: none;
}
}:where() hält die Selektor-Spezifität niedrig. Dadurch können Sie den Ring in einer einzelnen Komponente später gezielt anpassen.
Was der Code zeichnet
box-shadowoutline Im Modus für erzwungene Farben kann der Browser Schatten entfernen. Die Outline bleibt deshalb erhalten und übernimmt die Systemfarbe Highlight.
Der Ring muss bis zum Auge durchkommen
Ein korrektes :focus-visible genügt nicht, wenn overflow den Ring abschneidet oder ein feststehender Header das fokussierte Element verdeckt.
So prüfen Sie es
- Laden Sie die Seite neu und drücken Sie nur Tab. Der Ring muss bei jedem Link und Bedienelement mitwandern und stehen bleiben, bis der Fokus weiterzieht.
- Klicken Sie auf eine Schaltfläche. Ein fehlender Autorenring kann hier der Browser-Heuristik entsprechen. Klicken Sie danach in ein Textfeld; dort ist die sichtbare Markierung typischerweise weiterhin sinnvoll.
- Tabben Sie bei geöffnetem Sticky Header, Cookie-Banner und Dialog. Das fokussierte Element darf nicht vollständig verdeckt sein; der Ring darf nicht an einem Container abgeschnitten werden.
- Prüfen Sie mit aktivierten erzwungenen Farben. Wenn der Schatten entfällt, muss die System-Outline den Fokus weiterhin zeigen.
Quellen zum Weiterarbeiten
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Das Gutscheinfeld hat keinen Namen Regel label
Der Platzhalter im Feld verschwindet beim Tippen. Ein label mit for gibt dem Feld in der Kasse einen bleibenden Namen.
Kritisch Die Einlösen-Schaltfläche zeigt nur einen Pfeil Regel button-name
Ohne Text bleibt die Schaltfläche neben dem Feld namenlos. aria-label="Einlösen" oder ein sichtbares Wort nennt die Aktion.
Kritisch Die Produktkarte fängt den Fokus zweimal Regel nested-interactive
In der Karte liegt ein Link innerhalb der Schaltfläche. Nebeneinander bekommt jeder Stopp seinen eigenen sichtbaren Rahmen.
Zum Mitnehmen
Der sichtbare Fokus, korrigiert
Eine Regel im CSS, zwei Namen im HTML.
Korrektur in 3 Schritten ansehen
outline durch eine eigene Markierung ersetzen
outline: none entfernt die einzige Fokusmarkierung. :focus-visible zeigt sie bei Tastaturbedienung und lässt den Mausklick unverändert.
KorrekturvergleichSchritt 1 · CSS Vorher
:focus { outline: none; }Nachher
:focus-visible { outline: 3px solid #1b1b1b; outline-offset: 2px; }Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit der Tabulatortaste durch die Kasse. Um jedes Element liegt ein deutlicher Rahmen.
Feld und Schaltfläche benennen
Das label benennt das Feld, aria-label die Schaltfläche. Der Platzhalter entfällt, weil er beim Tippen verschwindet.
KorrekturvergleichSchritt 2 · HTML Vorher
<input type="text" name="gutschein" placeholder="Gutscheincode"> <button type="submit"><span aria-hidden="true">→</span></button>Nachher
<label for="gutschein">Gutscheincode</label> <input id="gutschein" type="text" name="gutschein"> <button type="submit" aria-label="Einlösen"><span aria-hidden="true">→</span></button>Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf „Gutscheincode“. Der Cursor springt ins Feld.
Den Link aus der Schaltfläche nehmen
Ein Fokusstopp pro Bedienelement. Nebeneinander bekommen Schaltfläche und Link je einen eigenen sichtbaren Rahmen.
KorrekturvergleichSchritt 3 · HTML Vorher
<button type="button" class="karte">Warenkorb öffnen <a href="/versand">Versandkosten</a> </button>Nachher
<button type="button" class="karte">Warenkorb öffnen</button> <a href="/versand">Versandkosten</a>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit der Tabulatortaste durch die Karte. Der Rahmen liegt einmal um die Schaltfläche, einmal um den Link.