jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-tools

Gratis Focus Ring CSS Generator

Genereer toegankelijke :focus-visible outline- of box-shadow-CSS-regels met contrastcontrole.

Tool laden...

Wat is Focus Ring CSS Generator?

Een focusring is de visuele indicator die toont welk element momenteel is gefocust door het toetsenbord. WCAG 2.4.7 vereist een zichtbare focusindicator voor alle interactieve elementen. CSS :focus-visible richt zich specifiek op toetsenbordfocus zonder een ring te tonen bij muisklikken. Een goede focusring heeft voldoende contrast (minimaal 3:1) tegen de achtergrond.

Snel antwoord

Genereer een toegankelijke toetsenbordfocusring CSS-regel. Gebruik :focus-visible om de ring alleen te tonen voor toetsenbordnavigatie. Zorg voor minimaal 3:1 contrast tussen de focuskleur en de achtergrond. Voeg een box-shadow fallback toe wanneer u afgeronde focusringen nodig heeft.

Last updated: 2026-05-28

Beperkingen

  • Outline volgt border-radius niet in alle browsers. Chrome en Safari tekenen outlines met vierkante hoeken op afgeronde elementen. Gebruik box-shadow als fallback voor afgeronde focusindicatoren.
  • De focusring contrastcontrole gebruikt een vereenvoudigde relatieve luminantieberekening. Werkelijk waargenomen contrast hangt af van de omringende UI - test visueel met echte inhoud.
  • Sommige besturingssysteem hoog-contrast modi overschrijven auteur focusstijlen. Test altijd met Windows High Contrast Mode en macOS Increase Contrast instellingen ingeschakeld.

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

Zo gebruik je deze tool

  1. Stel de focusringbreedte, offset, kleur en stijl in, of kies box-shadow als fallback.
  2. Specificeer de CSS-selector - :focus-visible voor alleen toetsenbordfocus, of :focus voor alle focus.
  3. Als u een achtergrondkleurveld gebruikt, controleert de tool de contrastverhouding en waarschuwt als deze onder WCAG-drempels valt.
  4. Kopieer de CSS-regel en pas deze globaal of op specifieke componenten toe.

Waarvoor je het kunt gebruiken

  • Maak een wereldwijde toetsenbordfocusstijl die voldoet aan WCAG 2.4.7 zichtbare focusvereisten.
  • Ontwerp een merk-uitgelijnde focusring die past bij het kleurenpalet van de site terwijl toegankelijkheid behouden blijft.
  • Vervang de standaard browseroutline door een aangepaste box-shadow focusindicator die werkt op afgeronde elementen.

Gebruik

Praktische voorbeelden

Voorbeeld

Wereldwijde toetsenbordfocusstijl

Stel een 3px effen blauwe outline met 2px offset in op :focus-visible voor alle interactieve elementen. De ring verschijnt alleen wanneer gebruikers navigeren met het toetsenbord en heeft 5,6:1 contrast tegen witte achtergronden.

Voorbeeld

Donker thema focusring

Gebruik voor een donker thema applicatie een 3px effen witte outline op :focus-visible. De tool bevestigt dat de witte ring voldoende contrast heeft tegen de donkere achtergrond.

Veelgemaakte fouten

  • outline: none instellen zonder een vervanging te bieden - dit verwijdert de focusindicator volledig en schendt WCAG 2.4.7.
  • Een focuskleur kiezen die samenvalt met de achtergrond - de ring moet ten minste 3:1 contrast hebben om waarneembaar te zijn.
  • :focus gebruiken in plaats van :focus-visible - :focus toont de ring ook bij muisklikken, wat er visueel rommelig uit kan zien. :focus-visible richt zich alleen op toetsenbordnavigatie.

Verificatie

  1. TAB door de pagina met het toetsenbord en bevestig dat elk interactief element een duidelijk zichtbare focusindicator toont.
  2. Gebruik een contrastcontroletool of browserextensie om te verifiëren dat de focusringkleur ten minste 3:1 contrast heeft tegen de aangrenzende achtergrond.

FAQ

Vragen over Focus Ring CSS Generator

Moet ik outline of box-shadow gebruiken voor focusringen?

Outline is het native focusmechanisme en werkt op alle elementen. Box-shadow is handig wanneer u afgeronde focusringen nodig heeft (outline volgt de elementbox, niet border-radius in alle browsers) of wanneer u een prominentere visuele stijl nodig heeft. Verwijder nooit de outline zonder deze te vervangen door een even zichtbare indicator.

Wat is de minimale contrastverhouding voor een focusindicator?

WCAG 2.4.7 vereist een zichtbare focusindicator. Hoewel de specificatie geen specifieke verhouding voorschrijft, vereist WCAG 2.2 Non-text Contrast (1.4.11) dat UI-componenten ten minste 3:1 contrast hebben. Dit toepassen op focusindicatoren: de ring moet ten minste 3:1 contrast hebben tegen de aangrenzende achtergrond.

Gerelateerde tools

Meer 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.

Open tool

Probeer ook

Probeer ook

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool