Check keyboard navigation

Tab Order Visualizer

Paste an HTML snippet and see the exact order a keyboard user would tab through it, with positive-tabindex problems flagged.

    How it works

    1

    Paste your markup

    Copy an HTML fragment — a nav bar, a form, a whole page body — into the box, entirely client-side.

    2

    See the real order

    Every focusable element is numbered in the order a keyboard user would actually tab through it.

    3

    Fix what's flagged

    Positive tabindex values and other order-breaking patterns are highlighted so you can simplify them.

    FAQ

    What determines keyboard tab order?

    Elements with a positive tabindex are visited first, in ascending order, followed by naturally focusable elements (links, buttons, form fields, and elements with tabindex="0") in their source-code order.

    Why is a positive tabindex usually a problem?

    A positive tabindex overrides the natural reading order, which is easy to get out of sync as a page changes over time and often confuses keyboard and screen-reader users. tabindex="0" or relying on source order is usually safer.

    What does tabindex="-1" do?

    tabindex="-1" removes an element from the keyboard tab sequence while still allowing it to be focused programmatically, for example when moving focus into a dialog with JavaScript.

    Try other tools

    ARIAARIA Label CheckerFlag interactive elements missing labels. ALTAlt Text Writing HelperGet a suggested alt attribute. AaWord CounterCount words and characters.