In plain English
A keyboard user’s cursor is the focus outline. It is the only way they can tell which button or field they are on. Take it away and using the site by keyboard is like typing with the screen off.
Yet the single most common accessibility mistake is outline: none in the CSS,
added because the default outline looked “ugly”, with nothing put back in its
place. This rule says: the focused element must always show a clear indicator.
Who this is for
- Keyboard users, who rely entirely on the outline to know their position.
- People with attention or memory differences, who lose their place without a clear visual anchor.
What “good” looks like
Keep a visible indicator, and make it strong. A custom one is fine, as long as it is clearly visible.
/* Good: a clear, high-contrast focus ring */
:focus-visible {
outline: 2px solid #1b4dff;
outline-offset: 2px;
}
/* Bad: the classic offender, with no replacement */
:focus { outline: none; }Where stores get it wrong
Themes that strip outlines globally with outline: none, focus rings so faint
they fail contrast (which also touches
non-text contrast), and custom buttons
that never show any focus state. It is a top entry on the
common failures list.