focus accessibility a11y keyboard wcag add visible keyboard focus indicator WCAG compliant focus ring for interactive elements consistent focus style across components browser default focus outline is invisible or inconsistent need double ring for contrast on any background focus ring disappears in dark mode
Accessible Focus Ring
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/focus-ring.json Preview
Background
Customize
Quick Start
<button class="focus-ring">Click me</button>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-color-scheme, @supports fallback
- Size
- 621 bytes · 21 lines
- Custom Properties
-
--focus-color--focus-offset--focus-ring-width - Classes
-
.focus-ring
focus accessibility a11y keyboard wcag
Apply .focus-ring to any interactive element. Creates a double-ring focus indicator: a colored outline surrounded by a contrasting background shadow — visible on both light and dark backgrounds.
Customize via CSS custom properties:
--focus-color— ring color (default: blueoklch(0.55 0.2 250))--focus-offset— gap between element and ring (default:2px)--focus-ring-width— ring thickness (default:2px)
Includes @supports fallback for browsers without :focus-visible.