javascript focus visible
JavaScript focus visible ohne verlorenen Fokusring.
:focus-visible lässt den Browser die Eingabemodalität bewerten. JavaScript ist nur als begrenzter Fallback sinnvoll – Tastatur und Pointer müssen dabei dieselbe Klasse synchronisieren.
01 / Input-Radar
Modalität wählen, Fokusring live verfolgen.
Die Demo startet von selbst und zeigt die wichtigsten Zustände. Sobald Sie eingreifen, gehört das Input-Radar Ihnen.
Input-Radar
Signal bis zum Fokusring verfolgen
Laufende Probe
Ring erwartet
- keydown · Tab
- Browser-Heuristik
- Ring sichtbar
Aktiver Vertrag
CSS zuerst
.action:focus-visible {
outline: 3px solid #ffd43b;
outline-offset: 3px;
}Eingabemodus-Labor bereit. Tastatur und moderner Browser sind gewählt.
02 / Der Unterschied
Ein sauberes Muster ist der Anfang, nicht die Website.
Fokusringe fallen unbemerkt aus
Ein globales outline-Reset, ein Fallback, der Tastatur und Pointer nicht synchronisiert, oder ein Browser ohne :focus-visible – der Ring verschwindet, ohne dass es im eigenen Setup auffällt.
Berechnete Styles statt Code-Muster
Der Website-Check prüft echte Elemente und ihre berechneten Styles auf Ihren Seiten – inklusive der Fokusmarkierungen interaktiver Elemente und weiterer automatisch erkennbarer Barrieren.
Fundstellen statt Vermutung
Jeder Befund nennt Seite, Vorkommen und den konkreten nächsten Schritt – kostenlos und ohne Installation.
03 / Auf Ihrer Website
Jetzt die eigenen Fokuszustände prüfen.
Das Input-Radar simuliert das Prinzip. Der Website-Check prüft Ihre Seiten auf unterdrückte Fokusmarkierungen und weitere automatisch erkennbare Barrieren.
Der Website-Check ist bereit.
- 1URL
- 2Auswahl
- 3Prüfung
- 4Ergebnis