focus visible css
focus visible css: Der Ring folgt der Eingabe.
:focus-visible zeigt den Fokus, wenn der Browser ihn für nötig hält. Gestalten Sie einen kontrastreichen Ring und behalten Sie einen sicheren Fallback.
01 / Live-Labor
Eingabemodus wählen, Ring einstellen, CSS mitnehmen.
Die Demo startet von selbst und zeigt die wichtigsten Zustände. Sobald Sie eingreifen, gehört das Labor Ihnen.
Fokus-Signallabor
Modalität wechseln. CSS prüfen.
Fokuspfad
Ring erwartetDer Ring verfolgt die Tastaturnavigation.
Robuste Ausgabe
mit Fallback:where(a, button, input, select, textarea):focus {
outline: 3px solid #005FCC;
outline-offset: 3px;
}
@supports selector(:focus-visible) {
:where(a, button, input, select, textarea):focus:not(:focus-visible) {
outline: none;
}
:where(a, button, input, select, textarea):focus-visible {
outline: 3px solid #005FCC;
outline-offset: 3px;
}
}
@media (forced-colors: active) {
:where(a, button, input, select, textarea):focus-visible {
outline-color: Highlight;
}
}Bestehende Umsetzung
- :focus-visibleTastaturregel fehlt
- Fallback:focus vorhanden
- Outlineoutline wird entfernt
- Forced ColorsSystemmodus offen
Tastaturmodus aktiv. Der Fokusring ist am Ziel sichtbar.
02 / Der Unterschied
Ein Ring im Labor ist der Anfang, nicht die Website.
outline: none bleibt oft ohne Ersatz
Resets und Themes entfernen den Standardring, ohne einen eigenen zu setzen. Wer mit der Tastatur navigiert, verliert dann seitenweit die Orientierung.
Der Check prüft jede Seite
Der Website-Check findet fehlende und unterdrückte Fokusmarkierungen auf Ihren Seiten – nicht nur an einem Beispiel-Button im Labor.
Fundstellen statt Bauchgefühl
Jeder Befund nennt Seite, Vorkommen und den konkreten nächsten Schritt – kostenlos und ohne Installation.
03 / Auf Ihrer Website
Jetzt die eigene Seite prüfen.
Das Labor zeigt das Prinzip an einem Element. Der Check prüft Ihre Website auf Fokusmarkierungen und weitere automatisch erkennbare Barrieren.
Der Website-Check ist bereit.
- 1URL
- 2Auswahl
- 3Prüfung
- 4Ergebnis