No visible focus indicator

Keyboard navigation is sequential. A user presses Tab, focus moves to the next control, and the indicator is the only thing telling them which one. Without it, pressing Enter is a guess.

It matters beyond screen-reader users. People with motor impairments who cannot use a mouse, people using switch devices or voice control, and anyone whose trackpad has failed all navigate this way.

It also matters to people who simply prefer the keyboard, which on a form-heavy site is a substantial share of the people who complete anything.

The default browser outline is not attractive, which is why it gets removed. It is, however, functional, and removing it without a replacement converts an aesthetic preference into an accessibility failure.

`outline: none` — or `outline: 0` — applied to `:focus`, or applied globally in a reset. It has been copied into resets for two decades and it is the most common single cause.

A variant is removing the outline and relying on a colour change. A background shifting from one shade to a slightly different one usually fails the contrast requirement and is invisible to anyone who did not know to look.

Another is styling `:focus` correctly on links and forgetting buttons, or custom components built from `<div>` elements that never receive focus styling because they were never focusable in the first place.

The modern remedy is `:focus-visible`, which applies styling when the browser judges focus should be indicated — typically for keyboard navigation and not for a mouse click. It resolves the original complaint without removing the indicator.

2.4.7 Focus Visible, Level AA: any keyboard-operable interface has a mode of operation where the focus indicator is visible.

2.4.11 Focus Not Obscured (Minimum), Level AA in WCAG 2.2: the focused element must not be entirely hidden by author-created content — a sticky header that covers the element you just tabbed to is a failure.

2.4.13 Focus Appearance, Level AAA in WCAG 2.2: sets a minimum area and a 3:1 contrast change for the indicator.

1.4.11 Non-text Contrast, Level AA: the indicator itself needs 3:1 contrast against its surroundings, which a thin light-grey outline on white does not achieve.

Taken together: visible, not covered, and contrasting. A replacement indicator that meets those is entirely acceptable; the browser default is not sacred.

Put the mouse down and press Tab repeatedly from the top of the page. Watch where focus goes. If at any point you cannot see it, that is the finding.

Do it on a page with a sticky header and again after scrolling, which is where 2.4.11 failures appear.

Search the stylesheets for `outline: none` and `outline: 0`. Each occurrence needs a replacement indicator or a `:focus-visible` rule beside it.

Check custom components — dropdowns, modals, tab panels, date pickers — which are built from non-focusable elements and frequently have no focus styling at all.

Test both themes if there is a dark mode: an indicator tuned for a white background often disappears on a dark one.

Do not remove the outline. If the default is wrong for the design, replace it: `:focus-visible { outline: 2px solid <colour>; outline-offset: 2px; }`.

Use `outline-offset` rather than removing the outline to stop it hugging the element — that is the usual underlying complaint and it has a direct solution.

Give the indicator at least 3:1 contrast against both the element and the page background. A two-tone indicator, light and dark, survives both.

Ensure sticky headers and footers do not cover the focused element. `scroll-margin-top` on focusable elements is the usual fix.

Style focus on every interactive element, including custom components, and confirm each is reachable by Tab in the first place.

`accessibility.focus_visible` looks for the patterns that suppress the indicator — focus outlines removed without a replacement rule — across the stylesheets the crawled pages load, and reports the pages affected.

`accessibility.keyboard_navigation` covers the adjacent question of whether interactive elements can be reached by keyboard at all, and `accessibility.tabindex` reports a tab order that has been overridden.

What an external check cannot do is watch someone tab through the page. It reports the CSS that removes the indicator; confirming that a replacement is visible in practice is a manual step, and the report says so.