Best 3 Tab Order Testing Tools Compared

Press Tab on your own page and watch where the focus ring goes. If it jumps from the search box to a sidebar link, back up to the header, then down into a modal that is not open, you have a tab order problem — and every keyboard user has been living with it.

The reason it happens is almost always the same: CSS moved elements visually while the source order stayed where it was, or a tabindex value pulled something out of sequence. Both are invisible until you actually tab through, which is why a tool that draws the order onto the page is worth more than any amount of reading the markup.

How to judge a tab order tool

Does it show real tab order or source order? These are the same thing right up until a positive tabindex appears, at which point they diverge — and that divergence is the bug.

Does it catch traps? A focus trap where Tab cannot escape an element is more serious than a wrong order, and it is easy to miss by eye.

Does it check focus indicators? An element that receives focus invisibly is technically in the order and practically unusable.

How much setup? A browser panel you already have beats an extension, which beats anything needing an account.

The comparison

Facts checked August 2026; tools change. Table covers only the 3 alternatives — our tool gets its own section below.

Accessibility Insights for Web

Microsoft’s accessibility tool, and the closest thing to a standard for this specific check. Its assisted tab stops test puts an empty circle on the focused element and, as you move away from each one, labels it with its place in the tab order — so the actual sequence gets drawn onto the page as you walk it.

It sits inside a broader FastPass flow described as identifying common high-impact issues in under five minutes, with automated checks powered by the open-source axe-core. It is a browser extension rather than a web page, so there is an install step, and for a one-off check on someone else’s site that is friction.

Edge & Chrome Source Order Viewer

Already installed, which is its main advantage. Open DevTools, go to the Elements tool, choose the Accessibility tab next to Styles, and tick “Show source order” — numbers appear over page elements showing their order in the HTML source. Selecting a container narrows the numbering to its children, which is useful on a complex layout.

The important caveat is in the name. It shows source order, and Microsoft’s own documentation is explicit that tabindex takes an element out of the source order — so on any page using positive tabindex values, the numbers are not the tab order. For the common case where CSS has reordered a layout visually, it is exactly right and takes ten seconds.

Infyways Keyboard Navigation Tester

A different approach: it records your keyboard interactions as you navigate and analyses them afterwards, showing visual feedback for each key pressed. What it looks for goes beyond order — missing focus indicators, tab traps and general navigation problems, checked against WCAG 2.1, with recommendations attached.

Free with no signup, as part of a large collection of no-signup utilities. Because it records a session rather than mapping the page statically, you only learn about the parts you actually tabbed through — which is more realistic and less complete than an overlay showing everything at once.

Focus Order Visualizer

Ours maps the order keyboard focus moves through a page — the real order, including whatever tabindex has done to it, rather than the source order that DevTools shows. That distinction is the whole reason to reach for a dedicated tool: the pages with the worst tab order are exactly the pages using tabindex to patch something, and those are the pages where the built-in viewer will mislead you.

What it does not do: detect focus traps, evaluate whether focus indicators are visible, or run the wider automated audit that Accessibility Insights includes. Those are separate checks and worth running too. WCAG’s focus order criterion is the standard being tested against, and it is short enough to read in full.

Which one to pick

• A full accessibility pass, not just order — Accessibility Insights.
• A ten-second check with nothing to install — the DevTools Source Order Viewer.
• Hunting a focus trap or a missing focus ring — Infyways’ recorder.
• A page using tabindex, where source order lies — the tool below.

How to do it with Focus Order Visualizer

1. Open the Focus Order Visualizer on the page you are testing.
2. Read the order against the visual layout — it should follow reading order, roughly left to right and top to bottom.
3. Look for jumps backwards up the page; those are usually CSS reordering something.
4. If you find positive tabindex values, remove them rather than adjusting them. Fixing source order is more durable.

The walkthrough is in how to check the keyboard tab order of a page. Other developer tools are in the tools directory.

You might also need

The Focus Indicator Tester covers the other half of keyboard accessibility — whether you can see where focus currently is.

Frequently asked questions

Is there a free tab order checker that doesn’t need an extension?

Yes. Your browser’s DevTools has a Source Order Viewer built in, and ours runs without installing anything. Accessibility Insights is the one requiring an extension, and it does considerably more in exchange.

Is source order the same as tab order?

Only when no positive tabindex values are present. tabindex="1" and higher pull elements to the front of the tab sequence regardless of where they sit in the source, which is exactly why DevTools’ source order numbering can disagree with what pressing Tab actually does.

Should I ever use a positive tabindex?

Almost never. tabindex="0" puts an element in the natural order and tabindex="-1" makes it focusable only by script — both are fine. Positive values create a separate priority sequence that is nearly impossible to maintain as a page grows.

Final thought

Fix the source order rather than the tab order. Every positive tabindex in a codebase is a repair for a layout problem, and it breaks again the moment someone adds a new interactive element.

Try the free Focus Order Visualizer