How to fix: Focus outline removed without replacement

A focus indicator is the visible ring or highlight a browser draws around the element that currently has keyboard focus. WCAG Success Criterion 2.4.7 Focus Visible requires that any keyboard-operable interface show a visible focus indicator, so a person tabbing through a page can always tell where they are. Browsers provide this for free as the default focus outline.

The failure happens when CSS removes that default outline and puts nothing in its place. The classic culprit is a blanket reset such as outline: none or outline: 0 on a button, link, or input, often added to hide what a designer considers an ugly ring. Once it is gone, the focused element looks identical to every unfocused element, and the keyboard user is flying blind.

The fix is not to keep the browser default forever, it is to replace it with something at least as visible. A strong custom :focus or :focus-visible style, using a thick outline, an outline with an offset, or a high-contrast box-shadow, satisfies the rule and usually looks better than the native ring. Removing the outline is only acceptable when a clearly visible alternative indicator appears in the same rule.

Sighted keyboard users are affected most directly: people with motor disabilities who cannot use a mouse, power users who navigate by Tab, and anyone using a keyboard-like switch device. Without a focus indicator they cannot tell which link or button will activate when they press Enter, so they lose their place on every page.

It also affects users with low vision and cognitive disabilities, who rely on a strong, obvious indicator to track focus as it moves. A faint or missing ring forces them to guess, which makes forms, menus, and multi-step flows error-prone or impossible to complete.

A removed focus outline is a Level AA failure under SC 2.4.7, and Level AA is the de-facto benchmark U.S. courts apply to ADA Title III website claims. Keyboard accessibility is one of the six issue families most cited in demand letters, and a globally suppressed focus ring breaks keyboard operation across an entire site at once, not just on one control.

It is also a low-effort, high-impact fix. Web accessibility lawsuits have risen year over year and disproportionately target businesses under $25 million in revenue, so clearing a documented keyboard barrier removes an easy finding from any audit. Replacing a reset with a deliberate, on-brand focus style usually improves the visual design rather than compromising it.

1. Search your CSS and inline styles for outline: none and outline: 0, including any blanket reset like *:focus { outline: none }.
2. For every focusable element that loses its outline, add a clearly visible :focus or :focus-visible style in the same place.
3. Use a strong indicator: a thick outline with outline-offset, or a high-contrast box-shadow ring that stands out against the background.
4. Prefer :focus-visible so the indicator shows for keyboard users without forcing a ring on mouse clicks, if you want that behavior.
5. Tab through the page and confirm every interactive element shows an obvious indicator, then re-scan.

<style>
  button:focus { outline: none; }
</style>
<button style="outline:none">Subscribe</button>

<style>
  button:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
  }
</style>
<button>Subscribe</button>

AccessKnight flags this rule in two ways. First, it inspects every element with an inline style attribute and reports it when the style contains outline:none or outline:0 but has no box-shadow and no border alongside it, meaning the focus indicator was removed with no replacement on that element. Second, it scans the contents of every <style> block and flags any CSS rule that targets :focus and sets outline to none or 0, since that globally strips the focus ring. Because the check looks for a sibling box-shadow or border as evidence of a replacement, adding a visible custom focus style resolves the finding.