Meaningful Sequence
When the order content is presented in affects what it means, a correct reading order has to be recoverable from the code. That opening condition is the whole rule. Where the order carries no meaning there is nothing to satisfy. There can be more than one correct order, and you only have to provide one of them. The markup itself gives you a usable rule of thumb. Text is always a meaningful sequence. Ordered lists and tables are meaningful sequences. Unordered lists are not, so shuffling the items of a bulleted list with CSS breaks nothing at all.
Why it matters
A scrambled reading order does not crash anything, so nobody files a bug. It quietly rearranges the argument the page is making. A price read before the product it belongs to. A disclaimer before the offer it qualifies. Step three before step one. Somebody decides on the strength of information delivered in the wrong order, and neither of you can tell what went wrong. The same underlying order surfaces in more places than a screen reader. Reader modes, user stylesheets and print stylesheets all drop the layout and keep the sequence underneath.
Who this rule protects
Screen reader users hear the page in code order, so a scrambled order reaches them as a scrambled page. Braille display users read the same sequence. So does anyone using a reader mode, a custom stylesheet or a print stylesheet, since all three throw the visual arrangement away.
How to check it yourself
- Read the page with a screen reader from the very top, or switch CSS off entirely, and confirm the order still tells the same story.
- Where the order differs from the screen, ask whether the difference changes the meaning. A navigation block and a main story can appear in either order without loss. A set of numbered steps cannot.
- Look for CSS order properties, reversed flex directions and absolutely positioned content. All three move things visually while leaving them where they were in the markup.
- Check ordered lists and tables closely, since those are meaningful sequences by definition. Treat bulleted lists as a lower priority, because usually they are not.
- Look for words spaced out with literal blank characters, written as S A L E. A screen reader reads that letter by letter instead of as a word.
- Check tab order separately. It usually moves with reading order and it is a different rule, 2.4.3 Focus Order, so a page can pass one and fail the other.
Failures we see most often
- A set of numbered steps displays as 1, 2, 3 and sits in the markup as 3, 1, 2, purely for layout convenience.
- A multi-column magazine layout reads from the bottom of one column into the top of the next, mid-sentence.
- A pricing table moves its most popular column with a CSS order property, so the reading order pitches a different plan than the design does.
- A layout table stops making sense once it is read out row by row, which is still live in email templates and older CMS output.
- A word is spaced out with typed blanks, so the screen reader pronounces the letters instead of the word.
- Right-to-left text is mixed into a left-to-right page with no markup saying which is which, so the two run into each other.
Who this one is for
Read from this rule's own note above, so the grouping and the note cannot disagree.
- Blind and screen reader userspeople who cannot see the screen
How to fix it
- Keep the markup in the order you want it read, and use CSS for appearance rather than for sequence. That is a named technique, and the cheapest insurance available here.
- Where a design genuinely wants a different visual order, restructure the markup so the visual order and the reading order agree again.
- Space letters with CSS letter-spacing, never with typed blanks.
- For mixed-direction text, mark the direction on the inline element rather than leaving the browser to guess where one language ends.
- Judge sequence per container rather than per page. Two independent articles can sit in either order. The paragraphs inside one of them cannot.
Step-by-step fix guides (12)
- H34: Keep mixed-direction text reading in the right order
- H56: Fix nested right-to-left text with the dir attribute
- C6: Keep source order meaningful when CSS repositions content
- C8: Space letters with CSS, not blank characters
- C27: Match DOM order to visual order
- G57: Put content in a meaningful reading order
- PDF3: Fix the reading and tab order in PDFs
Passes vs. fails
Passes
Steps sit in the markup as 1, 2, 3, and the design still achieves its intended look without touching that sequence.
Fails
Steps display as 1, 2, 3 on screen and sit in the markup as 3, 1, 2, so a screen reader reads the last step first.
In audits and lawsuits
Modern CSS turns visual reordering into a one-line change, so this slips into a codebase without anybody deciding to break the reading order. No automated tool can judge whether an order counts as meaningful. This is also one of the criteria with no approved test rule behind it at all, so a scanner reporting nothing here has told you nothing. Our auditors read the page linearly, the way a screen reader user receives it, and mark the point where the story stops making sense. Expect the developer's first answer to be that the order is different and still reads fine. Sometimes that answer is right, and the rule agrees with them.