Keyboard Focus Order Checker
Free keyboard focus order checker. Paste HTML to list the expected tab order, find positive tabindex, unreachable onclick controls, and aria-hidden focus traps.
Loading tool...
What is Keyboard Focus Order Checker?
The Keyboard Focus Order Checker is a free online accessibility tool that analyzes pasted HTML and reconstructs the exact order in which the Tab key will visit every focusable element. It compares the computed tab order against the DOM reading order, flags positive tabindex values that hijack navigation, onclick controls that keyboard users can never reach, aria-hidden elements that still receive focus, and controls silently removed from the order — everything WCAG 2.4.3 and 2.1.1 audits care about, computed entirely in your browser.
Key Benefits
- See the full expected tab order, not just a pass/fail verdict
- Spot positive tabindex jumps before users complain
- Find keyboard-unreachable controls wired with onclick
- Catch aria-hidden focusables that confuse screen readers
- Export a shareable plain-text audit report
Common Use Cases
- •Auditing modal dialogs and menus for keyboard traps
- •Reviewing template markup before a WCAG 2.4.3 compliance check
- •Verifying that a refactor did not silently change tab order
- •Coaching developers on tabindex and focus management best practices
- •Checking legacy HTML for div-onclick buttons that block keyboard users
How to Check Keyboard Focus Order in Your HTML
- Paste your markup: Copy the HTML fragment you want to audit — a form, modal, or nav — into the input box, or press Sample for a demo with known problems.
- Review the tab order: The numbered list shows the expected tab order; watch for badges like jumps ahead, pushed back, and aria-hidden that mark order problems.
- Fix the listed issues: Work through the Issues section — each entry has a severity, a line and column, and the offending snippet so you can locate it in your source.
- Export the report: Use Copy Report for the clipboard or Download to save focus-order-report.txt and attach it to a pull request or ticket.
Key Features
- Reconstructs the expected Tab key order from any pasted HTML
- Flags positive tabindex values that hijack DOM focus order
- Detects onclick controls keyboard users cannot reach
- Catches aria-hidden focusables and tabindex=-1 removals
- Side-by-side tab position vs DOM position with jump markers
- Exportable plain-text focus audit report
Frequently Asked Questions
How is the expected tab order computed?
Positive tabindex values come first in ascending order, then the remaining focusable elements follow DOM order — exactly how browsers resolve tabindex. Disabled controls and tabindex=-1 elements are dropped from the order.
What problems does the checker flag?
It flags positive tabindex that jumps ahead of DOM order (WCAG 2.4.3), aria-hidden elements that can still receive focus, tabindex=-1 on natively focusable controls, and clickable elements with no keyboard path (WCAG 2.1.1).
What should I paste into the input?
The HTML fragment you want to audit, such as a form, modal, or navigation. Press Sample to load a demo full of typical issues, and the results update live as you type.
Can I share the results with my team?
Yes — Copy Report places a plain-text audit on your clipboard and Download saves focus-order-report.txt. Nothing you paste leaves your browser.