Model the Tab sequence of your markup and flag unnamed controls, positive tabindex and a missing skip link

Focus order planFreeFor developers and designers

25/day

free runs a day, no sign-in.

Before: what you give it

The example input, as typed in. You paste text, CSS, markup or notes.

<a href="#main">Skip to content</a><nav><a href="/">Home</a><a href="/x" tabindex="2">Pricing</a><button aria-hidden="true">Hidden but focusable</button><div onclick="go()">Fake button</div></nav><input placeholder="Search"><button><img src="s.svg" alt=""></button><div style="display:none"><a href="/gone">Gone</a></div><dialog open><button>Close</button></dialog><style>a:focus{outline:none}</style>

After: what comes back

The first lines of a real run on that input. Nothing here is edited by hand.

FOCUS ORDER PLAN
Planned Tab sequence (7 stops):
  1. <a> "Pricing" tabindex=2
  2. <a> "Skip to content"
  3. <a> "Home"
  4. <button> "Hidden but focusable"
  5. <input> "Search"
  6. <button> "(no name)"
  7. <button> "Close"

Not in the sequence:
  <a> hidden (not focusable, as intended)

Findings: 5 high, 0 medium, 1 low, 1 info
... full output on the tool page

What you get

A numbered list of Tab stops with guessed names, elements left out, and keyboard findings

What it cannot do

A model of browser behaviour, not a run in one; dialogs and script-built widgets need manual testing.

Who it is for

Developers
Designers

Free and Pro

Free	25 runs a day per IP address, up to 100,000 characters a run.
Pro	No daily limit, 300 requests a minute, up to 200,000 characters a run.

What each plan includes

Use it from your assistant

The tool is called plan_focus_order. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.

claude mcp add --transport http designers https://designers.allthepossibles.com/mcp

curl -X POST https://designers.allthepossibles.com/api/focus-order-plan -H 'content-type: application/json' -d '{"markup":"<a href=\"#main\">Skip to content</a><nav><a href=\"/\">Home</a><a href=\"/x\" tabindex=\"2\">Pricing</a><button aria-hidden=\"true\">Hidden but focusable</button><div onclick=\"go()\">Fake button</div></nav><input placeholder=\"Search\"><button><img src=\"s.svg\" alt=\"\"></button><div style=\"display:none\"><a href=\"/gone\">Gone</a></div><dialog open><button>Close</button></dialog><style>a:focus{outline:none}</style>"}'

Try it here

The form starts with the same example input, so you can run it first and then swap in your own.

Paste HTML