jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose Focus-Ring CSS Generator

Erstelle barrierefreie :focus-visible Outline- oder Box-Shadow-CSS-Regeln mit Kontrastprüfung.

Tool wird geladen...

Was ist Focus-Ring CSS Generator?

Ein Fokusring ist der visuelle Indikator, der zeigt, welches Element aktuell über die Tastatur fokussiert ist. WCAG 2.4.7 erfordert einen sichtbaren Fokusindikator für alle interaktiven Elemente. CSS :focus-visible zielt spezifisch auf den Tastaturfokus ab, ohne einen Ring bei Mausklicks anzuzeigen. Ein guter Fokusring hat ausreichenden Kontrast (mindestens 3:1) zum Hintergrund.

Kurze Antwort

Generieren Sie eine zug盲ngliche CSS-Regel für den Tastatur-Fokusring. Verwenden Sie :focus-visible, um den Ring nur bei Tastaturnavigation anzuzeigen. Stellen Sie mindestens 3:1 Kontrast zwischen der Fokusfarbe und dem Hintergrund sicher. Fügen Sie einen box-shadow-Fallback hinzu, wenn Sie abgerundete Fokusringe benötigen.

Last updated: 2026-05-28

Einschränkungen

  • Outline folgt border-radius nicht in allen Browsern. Chrome und Safari zeichnen Outlines mit eckigen Ecken auf abgerundeten Elementen. Verwenden Sie box-shadow als Fallback für abgerundete Fokusindikatoren.
  • Die Fokusring-Kontrastprüfung verwendet eine vereinfachte relative Leuchtdichteberechnung. Der tatsächlich wahrgenommene Kontrast hängt von der umgebenden UI ab —testen Sie visuell mit echten Inhalten.
  • Einige Betriebssystem-Kontrastmodi überschreiben die Autoren-Fokus-Stile. Testen Sie immer mit dem Windows High Contrast Mode und den macOS-Kontrasteinstellungen.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Legen Sie die Fokusring-Breite, den Versatz, die Farbe und den Stil fest, oder wählen Sie box-shadow als Fallback.
  2. Geben Sie den CSS-Selektor an —:focus-visible für reine Tastaturfokussierung oder :focus für jeglichen Fokus.
  3. Wenn Sie ein Hintergrundfarbfeld verwenden, überprüft das Tool das Kontrastverhältnis und warnt, wenn es unter den WCAG-Schwellenwerten liegt.
  4. Kopieren Sie die CSS-Regel und wenden Sie sie global oder auf bestimmte Komponenten an.

Wofür du es nutzen kannst

  • Einen globalen Tastaturfokus-Stil erstellen, der die WCAG 2.4.7-Anforderungen an sichtbaren Fokus erfüllt.
  • Einen markenkonformen Fokusring entwerfen, der zum Farbpalette der Website passt und gleichzeitig die Barrierefreiheit wahrt.
  • Den standardmässigen Browser-Outline durch einen benutzerdefinierten box-shadow-Fokusindikator ersetzen, der auf abgerundeten Elementen funktioniert.

Anwendungsfalle

Praxisbeispiele

Beispiel

Globaler Tastaturfokus-Stil

Setzen Sie einen 3px durchgehenden blauen Outline mit 2px Versatz auf :focus-visible für alle interaktiven Elemente. Der Ring erscheint nur, wenn Benutzer mit der Tastatur navigieren, und hat ein Kontrastverhältnis von 5,6:1 gegen weisse Hintergründe.

Beispiel

Fokusring für dunkles Design

Verwenden Sie für eine Anwendung mit dunklem Design einen 3px durchgehenden weissen Outline auf :focus-visible. Das Tool bestätigt, dass der weisse Ring ausreichenden Kontrast zum dunklen Hintergrund hat.

Haufige Fehler

  • outline: none setzen, ohne einen Ersatz bereitzustellen —dies entfernt den Fokusindikator vollständig und verstösst gegen WCAG 2.4.7.
  • Eine Fokusfarbe wählen, die mit dem Hintergrund verschmilzt —der Ring muss mindestens 3:1 Kontrast haben, um wahrnehmbar zu sein.
  • :focus anstelle von :focus-visible verwenden —:focus zeigt den Ring auch bei Mausklicks an, was visuell unruhig wirken kann. :focus-visible zielt nur auf die Tastaturnavigation ab.

Überprüfung

  1. Navigieren Sie mit der Tabulatortaste durch die Seite und bestätigen Sie, dass jedes interaktive Element einen klar sichtbaren Fokusindikator zeigt.
  2. Verwenden Sie ein Kontrastprüfwerkzeug oder eine Browsererweiterung, um zu überprüfen, ob die Fokusringfarbe mindestens 3:1 Kontrast zum angrenzenden Hintergrund hat.

FAQ

Fragen zu Focus-Ring CSS Generator

Sollte ich outline oder box-shadow für Fokusringe verwenden?

Outline ist der native Fokusmechanismus und funktioniert auf allen Elementen. Box-shadow ist nützlich, wenn Sie abgerundete Fokusringe benötigen (outline folgt der Elementbox, nicht border-radius in allen Browsern) oder wenn Sie einen auffälligeren visuellen Stil benötigen. Entfernen Sie niemals den Outline, ohne ihn durch einen gleichwertig sichtbaren Indikator zu ersetzen.

Was ist das Mindestkontrastverhältnis für einen Fokusindikator?

WCAG 2.4.7 erfordert einen sichtbaren Fokusindikator. Die Spezifikation schreibt kein spezifisches Verhältnis vor, aber WCAG 2.2 Nicht-Text-Kontrast (1.4.11) verlangt für UI-Komponenten mindestens 3:1 Kontrast. Angewendet auf Fokusindikatoren: Der Ring sollte mindestens 3:1 Kontrast zum angrenzenden Hintergrund haben.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren