Designers
ToolsDocsProAll the Possibles

All 141 tools / Accessibility checks

Find CSS and markup that make visual order differ from DOM order, and read both sequences side by side

Reading order checkFreeFor 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.

<body><footer>Contact</footer><main><div class="row"><a href="/a" tabindex="3">Buy</a><a href="/b" tabindex="1">Compare</a></div><h1>Plans</h1><h3>Pro</h3></main><style>.row{display:flex;flex-direction:row-reverse}.hero img{order:-1}.badge{position:absolute;top:0;left:0}.grid{display:grid;grid-auto-flow:dense}</style>

After: what comes back

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

READING ORDER CHECK
DOM order of landmarks: footer > main
DOM order of headings: h1 Plans | h3 Pro
Compare these two lists with what you see on screen from top left to bottom right.
Findings: 1 high, 4 medium, 2 low, 0 info

[HIGH] WCAG 2.4.3 Focus Order (A): 2 elements with positive tabindex
  Positive values jump ahead of everything else and become a second order to maintain.
  Seen in: <a> tabindex=3 | <a> tabindex=1
  Fix: Use tabindex 0 or -1 only and fix the DOM order.

[MEDIUM] WCAG 1.3.2 Meaningful Sequence (A); 2.4.3 Focus Order (A): 1 rule use CSS order
  order changes paint order only. Tab order, screen reader order and copy order stay in DOM order, so the three can disagree.
  Seen in: .hero img { order: -1 }
... full output on the tool page

What you get

DOM order of landmarks and headings, and findings on CSS order, reversal, grid placement and tabindex

What it cannot do

Reads pasted source only and does not compute layout; media-query rules are flattened.

Who it is for

  • Developers
  • Designers

Free and Pro

Free25 runs a day per IP address, up to 100,000 characters a run.
ProNo 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 check_reading_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/reading-order -H 'content-type: application/json' -d '{"source":"<body><footer>Contact</footer><main><div class=\"row\"><a href=\"/a\" tabindex=\"3\">Buy</a><a href=\"/b\" tabindex=\"1\">Compare</a></div><h1>Plans</h1><h3>Pro</h3></main><style>.row{display:flex;flex-direction:row-reverse}.hero img{order:-1}.badge{position:absolute;top:0;left:0}.grid{display:grid;grid-auto-flow:dense}</style>"}'

Try it here

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

More in accessibility checks

All accessibility checks tools