Focus Management

The focus indicator is the keyboard user’s cursor. When it is invisible, they are navigating blind — moving through an interface with no indication of where they are.

The default and its problems

Browsers provide a default focus ring — typically a blue outline or box shadow — which is visible enough in many contexts but often insufficient against dark or complex backgrounds. The common response in CSS codebases is outline: none or outline: 0, which removes the indicator entirely. This is a WCAG failure. A visible focus indicator is required for keyboard accessibility.

What a good focus indicator looks like

WCAG 2.2 introduced Success Criterion 2.4.11 (Focus Appearance), which specifies a minimum focus indicator: an area of at least the perimeter of the component, with a contrast ratio of at least 3:1 between focused and unfocused states. In practice: a 2px or 3px outline in a high-contrast colour (black, white with offset, or a brand colour checked against the background) is correct. The indicator must be clearly distinguishable from the surrounding content in all states.

The :focus-visible strategy

The CSS :focus-visible pseudo-class shows the focus ring for keyboard navigation while suppressing it for mouse clicks — mouse users already have a visible cursor. This resolves the tension between accessibility requirements and design preferences without hiding focus from anyone who needs it.

/* Wrong: removes focus from keyboard users entirely */
:focus { outline: none; }

/* Correct: custom focus style for keyboard users only */
:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

The focus style must meet WCAG 2.4.11: the indicator area must be at least as large as the element’s perimeter, with a 3:1 contrast ratio between focused and unfocused states. A 2px outline in a high-contrast colour satisfies this in most contexts.

Programmatic focus management

Some interactions require moving focus programmatically: opening a modal should move focus to the first interactive element inside it; closing the modal should return focus to the element that triggered it; revealing dynamic content should consider whether moving focus to that content is appropriate. Failing to manage focus programmatically leaves keyboard users behind while the interface changes around them.

The takeaway

Never suppress focus indicators without replacing them with something better. Design your focus styles as deliberately as your hover states. Treat focus management in dynamic interactions as a required design specification, not a developer detail.