CSS focus outline

`css focus outline` sichtbar testen.

Variieren Sie Stärke, Farbe und Abstand. Die Tastaturprobe zeigt, ob der Fokus erkennbar bleibt oder an einem Container abgeschnitten wird.

Eigene Website prüfen Fokusring live testen ↓

01 / Fokusring-Labor

Stärke, Farbe und Abstand variieren und die Tastaturprobe sehen.

Die Demo startet von selbst und zeigt die wichtigsten Zustände. Sobald Sie eingreifen, gehört das Labor Ihnen.

Fokusring-Labor

Außenkante unter Belastung

0/3

Tastaturstrecke

Kontrast 1,6 : 1

Details E-Mail

Prüfprotokoll

2-px-Umfang
3:1 Kontrast
Nicht beschnitten

.control:focus-visible {
  outline: 1px solid #F5C400;
  outline-offset: 2px;
}

.control-frame {
  overflow: hidden; /* kann den Ring abschneiden */
}

02 / Der Unterschied

Ein Ring ist der Anfang, nicht die Website.

Unsichtbar trotz korrektem CSS
overflow: hidden, dunkle Untergründe und outline: none ohne Ersatz lassen Tastaturnutzer ohne Orientierung. Das passiert selten im Labor, sondern im echten Layout.
Fokus im Seitenkontext
Der Website-Check sucht auf Ihren Seiten nach Fokus-Warnsignalen und weiteren automatisch erkennbaren Barrieren – vom fehlenden Alt-Text bis zum unbeschrifteten Feld.
Fundstellen mit nächstem Schritt
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 prüft einen Ring. Der Website-Check prüft Ihre Seiten auf Fokus-Warnsignale und weitere automatisch erkennbare Barrieren.

1URL
2Auswahl
3Prüfung
4Ergebnis

Tastaturstrecke

Unsichtbar trotz korrektem CSS

Fokus im Seitenkontext

Fundstellen mit nächstem Schritt