Highlight the focused element with script
SCR31 is a sufficient technique for making focus visible, with no partner technique and no qualifier. When an element takes focus, script changes its background color or its border so the element stands out. When focus leaves, the styling goes back. That is the whole technique. We would reach for CSS before script every time. The focus and focus-visible pseudo-classes do the same job with nothing to maintain and nothing to break, and W3C's own related technique for this points the same way. One thing worth knowing before you cite SCR31 as evidence. Its test is whether the indicator is visible, and it sets no contrast threshold at all. How much contrast the indicator needs against what is behind it is a different rule with its own numbers, so an indicator can satisfy SCR31 and still be too faint to find.
How we find it in an audit
Reviewers tab the whole page and watch, one press at a time, with no shortcuts. The question is simple. Can you see where you are. Automated tools can catch the most common cause outright, a stylesheet that sets outline to none with nothing put in its place, and after that it becomes a matter of looking. We pay particular attention to controls over images and colored panels, where an indicator that works on white disappears. Custom components get the same scrutiny, because focus styling written for one state is rarely checked in the others.
How affected users experience it
Losing the focus indicator does not hurt blind users. It hurts sighted people who navigate with a keyboard, and there are more of them than most owners expect. Someone with a tremor, someone with RSI, someone with limited hand movement, someone with a broken wrist, all pressing Tab and all guessing. The page responds perfectly to every press. It shows none of it. What that costs is not speed, it is confidence, because pressing Enter when you cannot see what is selected is a gamble on somebody else's checkout.
Passes vs. fails
Passes
input.onfocus = function () { this.classList.add("focused"); };
input.onblur = function () { this.classList.remove("focused"); };
/* Or skip the script entirely: */
:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; }Fails
*:focus { outline: none; }
/* Removed for looks. Nothing replaces it, so focus is somewhere and nobody can see where. */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
Other ways to satisfy this rule
9 guides on this site are filed under 2.4.7 Focus Visible. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- C15sufficientStyle the focus indicator instead of removing it
- C40sufficientBuild focus indicators that work on any background
- C45sufficientShow keyboard focus with :focus-visible
- G149sufficientUse components the browser highlights on focus
- G165sufficientKeep the platform's default focus indicator
- G195sufficientShip a clearly visible custom focus indicator
This guide is our interpretation of W3C technique SCR31: Using script to change the background color or border of the element with focus. 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.