Managing Focus Styles for Accessibility

The Golden Rule: Never Remove Focus Styles Without Replacing Them

/* A serious accessibility mistake */
*:focus {
  outline: none;
}

Removing the default focus outline purely for visual polish, with nothing to replace it, makes a site very difficult to navigate for anyone relying on a keyboard instead of a mouse - they lose all sense of where they currently are on the page.

Use :focus-visible Rather Than Removing Focus Entirely

*:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}
*:focus:not(:focus-visible) {
  outline: none;
}

As covered elsewhere in this section, :focus-visible shows a focus ring specifically for keyboard navigation while quietly skipping it for a plain mouse click - solving the aesthetic concern without breaking accessibility.

Making the Focus Indicator Actually Visible

A focus outline that is too thin, too similar in color to the background, or hidden behind other elements does not meet accessibility guidelines even if it is technically present. The outline itself needs sufficient contrast against its background, just like text does.

Focus Order Should Follow Visual Order

CSS properties like order in Flexbox/Grid can visually reorder elements without changing their order in the actual HTML - meaning the tab order (which follows HTML source order) can end up visually mismatched with what a keyboard user expects. It is worth double-checking that visual reordering with CSS has not created a confusing tab sequence.

A Simple Way to Test

Navigating an entire page using only the Tab key - no mouse at all - is one of the fastest ways to catch missing or unclear focus indicators before real users encounter the same problem.