diagnostic · one of 29free, no counter
Focus path
What order does the keyboard actually move through this page?
Tab order is a property of the whole page and nobody can hold it in their head from pressing Tab thirty times. Drawn over the layout it becomes obvious: consecutive stops are joined by arcs, a backwards hop is dashed red, and the two things that make a keyboard route unusable - a jump across the page and a focus ring nobody can see - are both visible at once.
Reach itPress ⌘+K on any tab and type focus path.Ctrl+Kon Windows and Linux
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome buildin the panel · free, no counter
What this actually is
the tab order drawn over the page, in sequenceOn any page with a custom tab index, a modal, or a layout whose visual order differs from its DOM order. A backwards hop is almost always a `tabindex` somebody added to fix something else.
Asked about this diagnostic
4 of themWhy are only consecutive stops joined?
Because a line from every stop to every other is a picture of nothing. The route is a sequence, and the interesting part is each hop - particularly the ones that go backwards.
What makes a hop red?
It goes backwards relative to the previous stop. That is not always wrong, but it is always worth looking at, and it is nearly always a `tabindex` above zero.
How is ring contrast measured?
Against the effective background - every layer behind the element composited, stopping at the first opaque one. A ring measured against a transparent parent would pass everywhere.
Is this the same as Keyboard walk?
No. This draws the route; Keyboard walk walks it and records what happened at each stop, including traps. This one is the map and that one is the journey.
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome build63 of these · no host permissions · three free audits