Overview
Tab Order Checker helps developers, QA testers, and accessibility
specialists visualize the keyboard tab order of a webpage. This tool makes
it easy to identify issues with focus sequence, custom tabindex values,
and unexpected navigation behavior.
How to Use the Extension
- Install the extension from the Chrome Web Store.
- Navigate to any webpage you want to evaluate.
- Click the Tab Order Checker icon in the Chrome toolbar to activate the visualization.
- The extension will overlay numbers and arrows showing the exact navigation sequence keyboard users experience.
- Click the extension icon again to remove the overlay.
Main Features
- Visual focus indicators with sequential numbering
- Arrows that show the full path of tab navigation
- Supports elements with
tabindex - Identifies skipped or unreachable elements
- Helps meet WCAG 2.1 requirements for keyboard accessibility (2.1.1, 2.4.3, 2.4.7)
- Runs fully offline and locally—no data is collected or shared
Troubleshooting
The overlay doesn’t appear
Make sure the active tab is a normal webpage. Extensions cannot run on:
Make sure the active tab is a normal webpage. Extensions cannot run on:
- Chrome Web Store pages
- Chrome settings pages
- chrome:// internal pages
- PDF viewer tabs
Some elements aren’t numbered
The extension only highlights focusable elements. Make sure the elements have:
The extension only highlights focusable elements. Make sure the elements have:
- A valid href (for links)
- A
button,input,select, or form element - A non-negative
tabindex
Keyboard Accessibility Tips
To ensure a proper focus sequence:
- Follow the natural DOM ordering
- Avoid using
tabindexgreater than 0 - Ensure all interactive elements are reachable by keyboard
- Use semantic HTML elements whenever possible
Contact & Support
If you have questions, bug reports, or suggestions, please contact: