How does the browser decide tab order?

Elements with a positive tabindex are visited first, in ascending numeric order. Then all elements with tabindex 0 or no tabindex are visited in DOM (document) order. Elements with a negative tabindex are skipped by the Tab key entirely.

Why are positive tabindex values flagged?

A positive tabindex (1, 2, 3…) yanks an element out of its natural position and forces it to the front of the tab sequence. This is fragile and easy to break, so WCAG and every accessibility guide recommend relying on DOM order with tabindex 0 instead.

What counts as focusable?

Links with an href, buttons, inputs, selects, textareas, contenteditable elements, and anything with a non-negative tabindex. Disabled form controls and elements with tabindex='-1' are excluded because the Tab key cannot reach them.

Does this account for visual position?

No tool can fully predict order without rendering, but tab order is defined by the DOM and tabindex, not by CSS position. This visualiser follows the same algorithm the browser uses, so it is accurate for the markup you paste.

Is my HTML uploaded anywhere?

No. The HTML is parsed in your browser with the built-in DOM parser and never leaves your device.

Tab-Order Visualizer

The Tab-Order Visualizer shows you, in plain numbered order, exactly which elements a keyboard user will reach by pressing Tab — and in what sequence. A logical, predictable focus order is a core part of an accessible page, and the most common bug is a stray positive tabindex that silently reorders the whole page.

How it works

The tool parses your HTML and collects every element that is keyboard-focusable:

a with an href
button, input, select, textarea (unless disabled)
any element with contenteditable
any element with a non-negative tabindex

Elements with tabindex="-1" and disabled controls are excluded because the Tab key never reaches them.

It then sorts them using the same rule the browser applies:

First, all elements with a positive tabindex, in ascending numeric order (ties broken by document order).
Then, all elements with tabindex="0" or no tabindex, in document order.

Each element is shown with its computed sequence number, tag, and a label drawn from its text, aria-label, value, or name. Positive-tabindex elements are highlighted as warnings.

Example

<a href="/a">First link</a>
<button tabindex="2">Pulled to front</button>
<input type="text" name="email">

The button has tabindex="2", so it is visited before the link and input even though it appears second in the markup. The visualiser numbers the button 1 and flags it, making the reordering obvious.

Tips

The fix for a flagged positive tabindex is almost always to remove it (or set it to 0) and let DOM order do the work.
If the focus order looks wrong but no positive tabindex is flagged, your visual layout probably differs from your source order — reorder the markup.
Use this alongside a focus-indicator contrast check so every reachable element is also clearly visible when focused.