Never remove the keyboard focus outline with CSS
Someone set outline to none so the design would sit flat, and the keyboard user lost the one thing telling them where they are. F78 is the failure technique covering that, which makes a match a defect in your stylesheet rather than a method you can cite. It reaches past a deleted outline as well. An indicator that is present and unusable fails the same way, and that covers a replacement too faint to see, a permanent outline identical to the focus one so nothing visibly changes, and a thick border in the indicator's own color that swallows it. W3C files this failure under a Level AAA focus-appearance rule too. Its own test measures nothing at all. Tab to everything, and look for the indicator.
How we find it in an audit
We tab through every audited template end to end and watch, because that is the test. Where a replacement indicator exists we measure it against the 3:1 non-text contrast the rule itself sets, since a visible indicator and a legible one are two different claims. A text sweep of the stylesheets runs alongside, which is fast and catches the global rules a page-by-page tab would take an hour to reach. Design-system components get extra time, because a control that already carries a heavy border is where a real indicator hides in plain sight.
How affected users experience it
This one lands hardest on sighted keyboard users, which is why it gets forgotten. Someone with a tremor, a repetitive strain injury, or no working mouse presses Tab and the page answers with nothing. They count keystrokes and hope. Low-vision readers hit the same wall with a smaller target, and anyone using a screen magnifier loses the view that follows focus, so the page jumps to a place they cannot see a reason for.
Passes vs. fails
Passes
:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }Fails
*:focus { outline: none; }How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Element in sequential focus order has visible focusA tool can check this
The other techniques filed under this rule
6 guides on this site are filed under 1.4.11 Non-text Contrast. W3C documents this one as a failure of that rule, so it describes a way the rule gets broken rather than a way to pass it.
This guide is our interpretation of W3C technique F78: Failure of Success Criterion 1.4.11, 2.4.7 and 2.4.13 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.