diagnostic · one of 36 free, 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 it Press ⌘ + K on any tab and type focus path. Ctrl + K on Windows and Linux
in 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.
how to use focus path
- Open Focus path. The arcs are drawn over the layout in one overlay layer.
- Follow the numbering: consecutive stops are joined, and a backwards hop is dashed red.
- Look for the two faults that make a route unusable - a jump across the page, and a stop with no ring.
-
A backwards hop is almost always a
tabindexadded to fix something else. Start there.
written about at length
70 of these · no host permissions · three free audits