91% of the stores we tested fail on focus order
The one accessibility number that moves without a redesign — Lighthouse flags it on nearly every storefront we run.
- of the cohort flag a focus-order fault
- 91%of the cohort flag a focus-order fault
- redesigns required to fix it
- 0redesigns required to fix it
The cheapest accessibility fix there is
Focus order is what happens when somebody navigates your store with a keyboard: the sequence the outline moves in as they press Tab. On a storefront it should run header, nav, main content, footer. On most of the cohort it runs header, nav, a hidden mobile menu nobody can see, three off-screen carousel slides, and then main content.
Nothing about that requires a redesign. It is almost always a hidden element that was hidden with opacity or transform instead of being removed from the tree, which leaves it focusable while being invisible.
A keyboard user tabbing into a menu they cannot see has no way to know where they are.
The three faults that produce it
- 01Off-canvas menus that stay in the treedisplay:none or the inert attribute, not opacity:0. The visual result is identical and the accessible one is not.
- 02Carousels that keep every slide focusableOnly the visible slide should be reachable. Everything else needs inert while it is off-screen.
- 03A skip link that skips nowhereIt has to move focus, not just scroll. If the target has no tabindex, focus stays where it was.
Why it is worth doing first
It is the one accessibility number that moves in an afternoon, it needs no design decisions from anybody, and it happens to be the fault most likely to be raised in a complaint. Start there, then do the harder work.