Meaningful Sequence

What it asks

If the meaning of content depends on the order in which it’s read — instructions, narrative, a step-by-step process — that order must be preserved in the DOM. Screen readers and reflow engines walk the document in source order; if CSS order, position: absolute, flex-direction: row-reverse, or grid placement scrambles the visual order away from the DOM order, the experience falls apart.

How to meet it

• Write the DOM in the order the content is meant to be read; use CSS to position visually, not to invent the sequence.
• Audit any use of flex-direction: row-reverse, CSS order, or grid-area that moves content out of its source position.
• For multi-column layouts, place columns in the DOM in the reading order, not the visual column order.
• Test by disabling CSS (browser dev tools, “view source order”) — the unstyled flow should still make sense.
• Run the page through a screen reader and note any moment where the announcement order surprises you.

Common failures

• A sidebar visually on the right but placed first in the DOM — screen readers hear ads, related links, and CTAs before the main article.
• flex-direction: row-reverse on a navigation menu — sighted users see Home / About / Contact, screen readers hear Contact / About / Home.
• CSS order on form fields rearranging visual order away from DOM order, so tabbing jumps unpredictably.
• “Skip to content” link placed after the navigation in the DOM but absolutely positioned at the top visually — keyboard users hit nav first.
• Cards in a grid that visually flow left-to-right but are placed in DOM bottom-to-top because of a clever grid trick.

Why it matters

Meaningful-sequence failures are sneaky — the page looks fine, validates, and passes most automated checks. They only surface when a real screen-reader user tries to read the page top to bottom. Most fixes are small DOM reorders, but the diagnostic cost of finding the problem is high.