Online Tool Store
Focus Order Visualizer
Map the order keyboard focus moves through a page's interactive elements and flag traps, skipped controls, and misused tabindex values.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Developer
Focus Order Visualizer
Frontend preview — no upload or external service.
Focus order
14 stops: skip link → nav (5) → search → main heading link → 4 cards → footer. Two warnings: tabindex="3" on a card, and a focusable element inside a hidden menu.
How the Focus Order Visualizer works
- Provide the markup for the page or component you are auditing.
- Choose whether to include elements made focusable with tabindex.
- Walk the numbered order and check it matches the visual reading order of the page.
FAQ
Why is a positive tabindex a problem?
Any element with tabindex="1" or higher jumps to the front of the entire page's tab order, ahead of everything natural. One positive value effectively breaks the order of the whole document.
What is a focus trap?
A region keyboard users can enter but not leave with the keyboard alone. Modals need a deliberate trap while open and must release it on close; anywhere else it is a defect.
Should focus order match visual order?
Yes. When CSS reorders content visually — flex order or grid placement — the tab order still follows the DOM, and the mismatch is disorienting for anyone navigating by keyboard.
How we compare
| Feature | Online Tool Store | A CLI script | An IDE plugin |
|---|---|---|---|
| Numbered focus sequence | ✓ | Manual tabbing | Yes |
| Flags positive tabindex | ✓ | ✗ | ✓ |
| Detects hidden focusable elements | ✓ | ✗ | Sometimes |
| No extension to install | ✓ | ✓ | ✗ |
Focus Order Visualizer makes one invisible thing visible — where the keyboard actually goes — which is where most keyboard accessibility bugs are hiding.