A Focus Management Audit Finds Where the Keyboard Really Is

What We Keep Finding

Try this for thirty seconds. Unplug your mouse and press Tab through your homepage. Can you see where you are? A decade of stylesheets shipped an outline reset and called it design, and the indicator went with it. Then there is order, which is the half nobody checks. Tab jumps from the name field to the footer and back to the search box, and your keyboard user rides along wondering what they touched.

Worth knowing which rule does what, because three of them get run together and they measure different things. The rule about focus being visible asks only that an indicator exists and sets no ratio at all. The 3:1 bar lives in a different rule, the one about non-text contrast, measured against the colors sitting next to the indicator. And a third rule, new in WCAG 2.2, covers focus buried under a sticky header, and it fails only when the focused thing is entirely hidden. Partly covered passes at the level you are held to. So an indicator can be visible and fail, or be half-hidden and pass, and one audit that treats all three as one question will get two of them wrong.

There is a fourth that is worth more than all three, and it is the one people forget is a rule at all. A keyboard trap, where focus goes into something and cannot get out, is one of a small handful of failures that apply to everything on the page, including content nobody chose to rely on. So a trapping widget does not fail its own corner, it stops the whole page conforming. It also has a second half that lets you off. If getting out needs an unusual key, the rule is satisfied as long as the page tells the user which key. So "press Escape to close" turns a failure into a pass, and that is very often the cheapest fix on the report.

Where things go wrong most is programmatic focus, meaning the moves your code makes. Modals, menus, route changes. Worth knowing before you write any of it that the browser's own dialog element does five of those jobs on its own. It moves focus in, holds the tab sequence, closes on Escape, makes the background inert, and puts focus back where it started. The only decision left to you is where focus lands on the way in.