The focus ring is the interface
For anyone who moves through a page without a mouse, the focus ring is the cursor. Here is what a great one looks like and why most of them fail.
Press the Tab key once. Somewhere on this page a thin outline appeared around a link. Press it again and the outline moved. That outline is the focus ring, and for a large group of people it is the whole interface.
People who use a keyboard because a mouse hurts. People who use a switch, a sip-and-puff controller, or voice commands that move focus for them. People with a trackpad that died an hour before a deadline. Power users who never took their hands off the keys in the first place. For all of them, the focus ring answers the only question that matters: where am I?
Take it away and they are lost. Not inconvenienced. Lost.
What usually goes wrong
Three things, in roughly this order of frequency.
It was removed. Someone saw the browser's default outline on a mouse click, thought it looked unfinished, and wrote outline: none. The ring is gone for everyone, including the people who had no other way to see where they were. This is still the most common accessibility failure on the web, and it takes one line of CSS to cause.
It was designed for one background. The ring is a nice brand blue, chosen on a white mockup. It looks fine there. Then a button sits on a navy footer, a blue hero, or a photo, and the ring blends in. The ring exists but is not visible, which is the same as not existing.
It is too subtle to find. A one-pixel change in border color, a faint shadow, a slight shift in background. Designers call it refined. People scanning a busy page at arm's length call it invisible.
What a great one looks like
A great focus ring has five properties. You can see all of them at once in the Focus Lab, but here they are in words.
Two tones. One light, one dark, side by side. On a white page the dark tone shows. On a dark page the light tone shows. On a photo, at least one of them shows against whatever it lands on. A single color can only ever match half the world. Two tones match all of it.
Both of these buttons have their ring forced on. Imagine each one on a navy background. The single-tone ring vanishes. The two-tone ring keeps its white edge.
Enough contrast. WCAG 2.2 asks for at least 3:1 between the focus indicator and the colors next to it. That is the floor. Rings that clear 4:1 or 5:1 on every background are easier to find in sunlight, at a glance, and on a cheap monitor.
A little gap. An offset of two or three pixels between the element and the ring keeps the ring from merging with the element's own border. The eye finds a clean shape faster than a thick edge.
Shown to the right people. :focus-visible shows the ring when the browser believes it is needed, which in practice means keyboard navigation and not mouse clicks. Mouse users stop seeing a ring they did not ask for. Keyboard users keep theirs. Everyone is happier, and nobody has to write outline: none.
Consistent everywhere. One rule, applied to every interactive element: links, buttons, inputs, selects, summary elements, anything with a tabindex. A ring that changes shape from component to component makes people re-learn it on every page.
The rule
Here is the rule this site uses. It came out of the Focus Lab, where it scores twelve of twelve backgrounds.
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: none;
border-radius: 8px;
box-shadow: 0 0 0 4px #ffffff, 0 0 0 7px #0b3d5c;
}
Two box-shadows stack: a white band from the edge out to four pixels, then a navy band out to seven. The white band is the light tone. The navy band is the dark tone. outline: none is safe here only because a ring takes its place in the same rule.
If you prefer outline to box-shadow, the single-tone form is simpler, and it is still far better than nothing:
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 3px solid #0b3d5c;
outline-offset: 2px;
}
Just know that a single tone fails on dark backgrounds. The lab will show you exactly which ones.
Try it
Open the Focus Lab, start with the single blue ring, and watch it fail on eight of twelve backgrounds. Add a second tone. Watch it pass on all twelve. Then copy the CSS into whatever you are building.