Put content in a meaningful reading order
The source order is the order everything that is not a pair of eyes will read your page in. G57 asks that this order still makes sense, and W3C counts it as sufficient for the meaningful-sequence rule at Level A. CSS can put a box anywhere, so a three-step process laid out left to right on screen can sit in the markup as two, three, one and look completely correct. The test is to take the layout away and read what remains. If the meaning survives, you are done. Keyboard focus follows that same source order and answers to a different rule, so fixing this usually fixes that too, which is a reason to do it rather than a reason to treat the two as one thing.
How we find it in an audit
We linearize, which means switching the stylesheet off or running the page through a tool that reads it in source order, then reading the result start to finish. The question is whether the meaning is the same, not whether it looks tidy. Grid and flex layouts get the closest attention, since order and row-reverse are the two properties that quietly detach source order from visual order. Anything reading out of sequence goes into the finding with both orders written down, so the difference is impossible to miss.
How affected users experience it
A screen-reader user hears the page in source order and has no way to know a different order was ever meant. Steps arrive out of sequence and read as a sequence, so nothing marks the shuffle. That is what makes this one quiet. They do not get a garbled page, they get a coherent page saying something the author never meant, and then they act on it. Sighted keyboard users meet a version of the same thing when focus jumps around the screen.
Passes vs. fails
Passes
The DOM holds steps 1, 2 and 3 in order, and the grid styles that same order into the design everyone sees.
Fails
A CSS grid shows Step 1, Step 2 and Step 3 left to right, while the DOM holds them in the order 2, 3, 1.
Other ways to satisfy this rule
12 guides on this site are filed under 1.3.2 Meaningful Sequence. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- C6sufficientKeep source order meaningful when CSS repositions content
- C8sufficientSpace letters with CSS, not blank characters
- C27sufficientMatch DOM order to visual order
- H34sufficientKeep mixed-direction text reading in the right order
- H56sufficientFix nested right-to-left text with the dir attribute
- PDF3sufficientFix the reading and tab order in PDFs
This guide is our interpretation of W3C technique G57: Ordering the content in a meaningful sequence. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.