CSS focus visible
Der Ring erscheint bei der Tastatur
Ausgeblendete Panels und Scrollbereiche: hier verliert sich der Tastaturfokus.
Fokuslabor
Wann der Browser den Ring einschaltet
:focus beschreibt den Zustand. :focus-visible entscheidet, ob eine sichtbare Markierung in diesem Moment hilfreich ist. Drei Standbilder zeigen den Unterschied.
Konzeptdarstellung: Die genaue Heuristik legt der Browser fest.
:focus- trifft zu
:focus-visible- meist nicht
Der Fokus ist technisch da. Der Klickort war bereits sichtbar.
:focus- trifft zu
:focus-visible- trifft zu
Der Ring zeigt, welches Element auf Enter oder Leertaste reagiert.
:focus- trifft zu
:focus-visible- kann zutreffen
Ein Eingabefeld erwartet Tastatureingaben. Deshalb bleibt der Ort sichtbar.
Ein Tabweg als Bildfolge
Nach jedem Tastendruck wandert genau ein Ring. Die Nummer zeigt die Reihenfolge.
- 1StartseiteSuchePrüfen
Tab erreicht den ersten Link.
- 2StartseiteSuchePrüfen
Tab verschiebt den Ring ins Suchfeld.
- 3StartseiteSuchePrüfen
Tab verschiebt ihn zum Schalter.
Der robuste CSS-Block
Überschreiben Sie den sichtbaren Zustand. Eine globale Regel mit outline: none gehört nicht dazu.
:root {
--focus-ring: #3b2bbd;
}
:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 3px;
}
@media (forced-colors: active) {
:focus-visible {
outline-color: Highlight;
}
}So prüfen Sie es
- Tab drücken: Der Ring muss am ersten bedienbaren Element erscheinen.
- Weiter tabben: Der Ring muss in sinnvoller Reihenfolge mitwandern.
- Shift + Tab drücken: Der Ring muss rückwärts wandern.
- Bis an den Rand scrollen: Kein fester Kopf oder Hinweis darf das Ziel verdecken.
Aus dem Prüfbericht
Zwei Regeln, zwei Tabstopps
Kritisch Der Scrollbereich zeigt keinen Fokusring Regel scrollable-region-focusable
Ohne tabindex bekommt ein Kasten mit overflow: auto nie den Fokus, also auch nie den Ring. tabindex="0" ändert das.
Zum Mitnehmen
Der Fokusring, korrigiert
Ein Selektor im CSS, zwei Attribute im HTML.
Korrektur in 3 Schritten ansehen
Den Ring nur für die Tastatur zeigen
:focus-visible überlässt dem Browser die Entscheidung. Beim Tabben erscheint der Ring, beim Mausklick bleibt die Fläche ruhig.
KorrekturvergleichSchritt 1 · CSS Vorher
button:focus { outline: none; }Nachher
button:focus-visible { outline: 3px solid #1b1b1b; outline-offset: 2px; }Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie den Button, dann drücken Sie Tab. Nur beim Tabben erscheint der Ring.
Die Ausblendung am Elternelement entfernen
Der Link bleibt sichtbar und erreichbar. Ohne aria-hidden am Elternelement wird er auch wieder vorgelesen.
KorrekturvergleichSchritt 2 · HTML Vorher
<div aria-hidden="true"> <a href="#altbestand">Verdeckte Ringkarte öffnen</a> </div>Nachher
<div> <a href="#altbestand">Verdeckte Ringkarte öffnen</a> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Tabben Sie bis zum Link. Ein Vorleseprogramm nennt jetzt seinen Text.
Den Scrollbereich in die Tabfolge nehmen
Nur ein fokussierbarer Kasten kann einen Ring zeigen. tabindex="0" nimmt ihn auf, role und aria-label benennen ihn.
KorrekturvergleichSchritt 3 · HTML Vorher
<div class="protokoll" style="max-height:3rem;overflow:auto"> <p>Schritt 01 · Kreis setzen</p> </div>Nachher
<div class="protokoll" style="max-height:3rem;overflow:auto" tabindex="0" role="region" aria-label="Schrittprotokoll"> <p>Schritt 01 · Kreis setzen</p> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Tabben Sie weiter. Der Kasten bekommt den Ring, Pfeil ab scrollt seinen Inhalt.