Tab Order Trail

 

What is Tab Order Trail?

Tab Order Trail is a frontend developer and accessibility tool that helps you see how keyboard focus actually moves across a page.

Instead of guessing whether tab order feels natural, you can scan the page, inspect the tab sequence, step through one focus target at a time, and spot issues like strange jumps, offscreen stops, and visual-order mismatches.

It is built for the moments when a page looks fine with a mouse, but the keyboard experience feels confusing.

Features

• Scan tab order on a page and build a clean ordered trail
• Trail view to inspect the broader tab sequence
• Step view to move through one stop at a time
• Issues view to surface suspicious focus-flow problems
• Overlay markers attached to real elements on the page
• Optional arrows / path context for guided inspection
• Viewport-aware rendering to reduce clutter on dense pages
• Built for real pages where keyboard navigation gets messy fast

Why

Keyboard navigation bugs are easy to miss and annoying to debug.

Common problems include:

• tab order that does not match visual order
• focus jumping to unexpected places
• offscreen tab stops
• inaccessible flows hidden behind custom UI
• pages that feel fine with a mouse but break down on keyboard

Tab Order Trail makes that invisible behavior visible.

Note: Side panels need Chromium’s side panel API. Chrome, Edge, Brave — fine. Arc and a few others don’t implement it, so the panel won’t open there; nothing wrong with your install.

Tab Order Trail in action

Scan the page	Step through the tab order	Show issues

Build from source

npm install
npm run build

Then load the dist folder in chrome://extensions with Developer mode → Load unpacked.

npm run dev runs vite build --watch if you’re iterating on the UI.

Icons

Source art is assets/icon.svg (dark rounded tile + blue “tab trail” with three stops). Regenerate the PNGs in public/icons/ after editing:

npm run icons

Then npm run build as usual.

Author

Samyak Jain — GitHub · X