Skip to main content
PUBLIC.INTERNET
⚡ Instant Access🔒 Privacy First🆓 Always Free📱 Works Everywhere

Tab / Focus Order Visualizer

Keyboard users move through a page with the Tab key, and the order they land on things is the focus order. It should follow the visual and reading order, but a single stray tabindex can scramble it. Paste your HTML here and the tool computes the real Tab sequence and numbers every stop, exactly the order a keyboard user would experience. It applies the browser's actual rules: elements with a positive tabindex come first, sorted by their value, and only then the natively focusable elements and tabindex="0" elements in source order. It recognizes what is and is not focusable, so disabled controls, type="hidden" inputs, and links without an href are left out, while tabindex="-1" elements are reported separately as script-focusable but outside the Tab sequence. Each stop is linted for the patterns that cause trouble: a positive tabindex that jumps an element ahead of natural order, and a focusable <div> or <span> with no role. Everything is parsed in your browser; nothing is uploaded.

Tab order

    How to Check Focus Order

    1. Paste your markup - Drop the HTML for a form, toolbar, or page section into the Paste your HTML box.
    2. Read the numbered Tab order - The list shows each focusable element in the exact order Tab will visit it, top to bottom.
    3. Review the warnings - Stops with a positive tabindex or a roleless focusable element are flagged inline with an explanation.
    4. Check the notes below - See how many tabindex="-1" elements sit outside the Tab sequence, and whether positive tabindex has pulled the order away from source order.
    5. Copy the report - Click Copy report to grab the numbered order and warnings for a review or ticket.

    Why This Tool?

    Most ways to inspect focus order need you to deploy the page first and then tab through it by hand, or install a browser extension that walks a live DOM. That is slow when you are still writing the markup. Pasting a snippet and seeing the computed order immediately closes the loop while you edit, and unlike a live walkthrough it spells out why the order is what it is rather than just leaving you to infer it.

    The rule that surprises people is how positive tabindex works. Any value of 1 or higher is pulled to the front of the Tab order, before every natural element, and ordered among its peers by number, so a stray tabindex="1" on one button can make Tab jump there first and then back to the top of the page. That mismatch between Tab order and visual order fails WCAG 2.4.3 Focus Order and disorients keyboard and screen-magnifier users. The fix is almost always the same: remove positive values and let the DOM order carry the sequence, using tabindex="0" only to make a custom control focusable and tabindex="-1" only to move focus with script.