Why does visual order matter for accessibility?

Screen readers read content and keyboards move focus in DOM order, not visual order. WCAG 1.3.2 and 2.4.3 require these to agree, so if CSS rearranges items visually the source must still read in a sensible sequence, otherwise blind and keyboard users get a scrambled experience.

Which CSS properties can cause divergence?

The flexbox order property, flex-direction or flex-flow with a reverse keyword, and CSS Grid explicit placement such as grid-row, grid-column and grid-template-areas. Each can position an element away from its source position without changing the DOM.

Is using the order property always wrong?

No. It is allowed when the visual rearrangement does not change the meaning, for example purely decorative reflow. It becomes a failure when the new visual order implies a reading sequence that the DOM does not match, so each use needs a human check.

Can this tool tell me for certain that order diverges?

Not on its own. It cannot render the page, so it statically surfaces the declarations that are capable of causing divergence. You confirm the actual outcome by tabbing through the rendered page, which is why findings are framed as things to verify.

No. The CSS is parsed in your browser and analysed locally. Nothing you paste is sent anywhere, so it is safe to test styles from internal projects.

Visual vs DOM Reading-Order Checker

CSS Flexbox and Grid make it easy to lay things out in any visual position, regardless of where they sit in the HTML. That power is also a trap: a screen reader and the keyboard follow the DOM order, so if you reorder items only in CSS, what users hear and tab through no longer matches what sighted users see. This tool scans your CSS for the declarations that can cause that divergence.

How it works

The tool parses your CSS into selector and declaration blocks, stripping comments and flattening at-rule wrappers, then inspects each declaration for known order-shifting patterns:

High risk — the flexbox order property with a non-zero value, flex-direction/flex-flow containing reverse, CSS Grid explicit placement via grid-row or grid-column, and grid-template-areas.
Informational — direction: rtl and float, which can shift content but are often legitimate.

Each high-risk finding names the selector and declaration and explains why the visual position may no longer match the source order. Because the tool cannot render the page, the output is a checklist of things to confirm rather than a definitive pass or fail.

Example

.nav .logo { order: 2; }
.nav .menu { order: 1; }

Visually the menu now appears before the logo, but in the DOM the logo still comes first, so a screen reader reads them in the opposite order to what a sighted user sees. The fix is to put the elements in the intended reading order in the HTML and avoid the order swap.

Tips and notes

Prefer fixing the source order in HTML over reordering in CSS; that keeps visual, reading and focus order in sync automatically.
After any layout change, tab through the page with the keyboard. If focus jumps around the screen, your DOM order is wrong even if the styles look fine.
grid-template-areas is especially easy to get out of order on responsive breakpoints, so re-check each breakpoint.
All analysis is static and local to your browser; the CSS you paste never leaves the page.