Focus States: The Detail Sighted Keyboard Users Notice First

Somewhere in your stylesheet there is probably a line that says outline: none. It was added years ago, possibly copied from a CSS reset, possibly added after a designer saw a blue ring around a clicked button and asked for it gone. That one line is why a certain kind of user arrives at your site, presses Tab a few times, sees nothing happen, and leaves. I want to explain what that line actually removes, because I don’t think most people who ship it know.

When you navigate a page by keyboard, pressing Tab moves an invisible pointer called focus from one interactive element to the next: link, button, input, link. Press Enter, and the focused element activates. The focus ring, that outline the browser draws around the focused element, is how you know where the pointer is. It is not decoration. It is the cursor. Removing it doesn’t disable keyboard navigation; the focus still moves, Enter still works. It just makes the whole thing blind. Imagine your mouse still clicking but the arrow on the screen turned invisible. You could technically still use the computer. You would not.

The name of this essay says “sighted keyboard users” deliberately, because there’s a common confusion that keyboard accessibility is for blind users. Blind users do rely on the keyboard, but their screen reader announces where focus is, so a missing visual ring costs them little. The people the focus ring serves can see the screen fine; they just can’t use a mouse, or can’t use one well. People with tremors or limited fine motor control, for whom precise pointing is somewhere between exhausting and impossible. People with repetitive strain injuries, which includes a lot of programmers, some of them temporarily, some not. Power users who keep their hands on the keyboard because it’s faster. And anyone whose mouse just died. For all of them, the focus ring is the entire interface. Its absence isn’t a rough edge. It’s a locked door with a working handle.

How did deleting it become a reflex? The honest answer is that default focus rings used to be ugly, and they appeared at annoying times. For years, browsers drew the ring on click as well as on keyboard navigation, so mouse users saw dotted rectangles cluttering buttons they’d just clicked. Designers, reasonably, hated it. The wrong fix, outline: none, was one line, and it spread through resets and tutorials until it became ambient. But the underlying problem has actually been solved. Browsers now distinguish the cases: modern focus behavior, exposed in CSS as :focus-visible, shows the ring for keyboard navigation and suppresses it for mouse clicks. The scenario designers were fighting no longer requires fighting. Most outline: none lines shipping today are cargo cult, solving a problem that stopped existing, at the price of a class of users.

The right move is not merely to delete the deletion but to design the state you were suppressing. A good focus indicator has real contrast against the background, doesn’t rely on color alone, and is thick enough to spot at a glance. WCAG requires that keyboard focus be visible; that’s the floor. The interesting opportunity is above the floor: a focus style that matches your brand as deliberately as your hover states do. Teams polish hover endlessly, easing curves, subtle lifts, shadow transitions, and leave focus at either browser default or nothing. But hover and focus are the same idea for different input devices: the system telling the user “you are here.” Designing one and deleting the other is a statement, even if unintended, about which users you consider real.

There’s a cheap and honestly humbling test. Open your site, put the mouse out of reach, and try to do the thing your site exists for, using only Tab, Shift-Tab, Enter, and arrow keys. Two failure modes will show up fast. The first is the invisible focus we’ve been discussing: you’re pressing Tab and cannot tell where you are. The second is subtler: elements you can’t reach at all, usually because someone built a clickable <div> instead of a button or link, and divs aren’t in the tab order. The test takes five minutes and tells you more about your site’s keyboard story than any checklist. When I look at GazeSite results across many sites, suppressed focus styling is one of those findings that correlates with nothing else being wrong; perfectly professional sites, good contrast, good structure, and this one door quietly welded shut, because one line of CSS outlived the reason anyone wrote it.

What I like about focus states as a topic is the shape of the fix. The harm came from one line; the repair is a few lines. Style :focus-visible with a solid, high-contrast outline, remove the blanket outline: none, run the five-minute test. No redesign, no migration, no meeting. Just the restoration of a cursor to the people whose cursor you deleted, most of whom will never know it was ever gone, and all of whom can now buy what you’re selling.