Design an accessible :focus-visible keyboard ring visually. Tab to or click the demo controls to see it live, then copy the CSS.
Design a keyboard focus indicator that's both attractive and genuinely usable for everyone.
The preview button and input are real interactive elements, not a mock, so focus behaves exactly as it will on your site.
Built on :focus-visible, so mouse clicks stay clean while keyboard and switch users always see the ring.
Grab the finished :focus-visible rule plus a :focus fallback, ready to paste.
A visible focus indicator is how anyone navigating a page with a keyboard, a switch device, or voice control software knows which element is currently active. Without one, tabbing through a form or menu becomes a guessing game, because there's no way to tell where you are. WCAG 2.2 Success Criterion 2.4.7, Focus Visible, exists precisely because it used to be common practice to write *:focus { outline: none } for purely cosmetic reasons, silently locking out an entire category of users. The modern :focus-visible pseudo-class fixes the usability complaint that caused this in the first place: browsers apply it mainly for keyboard interaction and skip it for most mouse clicks, so you get a clean click experience and a clearly visible ring for keyboard users, in the same rule. This tool always keeps the ring paired with a :focus:not(:focus-visible) { outline: none } companion rule, which suppresses the default outline specifically for pointer interactions without ever removing it outright.
If you must override the default outline, always pair it with a visible custom ring — never delete it and stop there.
Outline doesn't affect layout and follows border-radius less precisely in some engines; box-shadow is a common alternative for pixel-perfect rounded rings.
A small positive outline-offset keeps the ring from overlapping tight text or icons inside a small control.
WCAG also expects the focus indicator itself to have sufficient contrast against its surroundings, not just be present.
focus-visible is a CSS pseudo-class that matches an element only when the browser determines focus should be visibly indicated, typically for keyboard navigation, while usually staying hidden for mouse clicks.
Removing outline without a visible replacement makes a page impossible to navigate with a keyboard, which fails WCAG Success Criterion 2.4.7 Focus Visible and locks out keyboard and switch-device users entirely.
Click into the demo input or tab to the demo button with your keyboard, or use the Simulate focus toggle to preview the generated ring without needing to focus the element yourself.
outline-offset adds space between the element's edge and the outline itself, which is especially useful for rounded or tightly packed controls so the ring doesn't overlap the content.
Keep your site usable for everyone with these free online accessibility tools.