Perceivable · Level A · 1.3.2
Meaningful Sequence
When the order content is presented in affects its meaning, that order has to be programmatically determinable — in practice, DOM order has to match the intended reading order, even when CSS makes it look different visually. There's no requirement to sort content any particular way (alphabetically or otherwise) — only that whatever order it's in can be reliably determined and preserves meaning.
- Blind
How to recognize it
Read the page with CSS effectively switched off — a screen reader does exactly this, since it follows DOM order regardless of how things are visually arranged. The classic failure is CSS (flexbox/grid order, float, absolute positioning) making something appear in a different position than where it sits in the markup: a product card where the price is pushed to visually appear above the title using order, while the DOM still has price first, title second, so a screen reader announces '$24, Wireless Mouse' instead of 'Wireless Mouse, $24.' A subtler version: a sidebar or 'related content' block that's visually floated off to the side but sits in the DOM between two paragraphs of the main article, so reading straight through interrupts the story to read the entire sidebar before continuing. A legacy version: a table-like layout built with plain text and spacing (inside a <pre>, for instance) instead of real table markup — read linearly, the spacing collapses and 'Name / Age' pairs turn into an undifferentiated list of words with no reliable pairing.
How to fix it
Write the DOM in the order that preserves meaning first, and use CSS only to adjust the visual position without needing to reorder the underlying markup. If a design genuinely needs a different visual arrangement than the natural reading order (a price badge positioned in a corner, for instance), make sure that specific reordering doesn't actually change what the content means when read straight through — reordering two unrelated, independent pieces of content is harmless; reordering a heading past the content it introduces isn't. Where content is naturally tabular or paired, use real markup for that (a <table>, or paired <label>/<input>) rather than relying on visual spacing to imply the relationship.
Example
Avoid
<div class="card">
<p class="price" style="order: 1">$24</p>
<h3 style="order: 2">Wireless Mouse</h3>
</div><article>
<p>Paragraph one of the story...</p>
<aside class="related-posts">Related: ...</aside>
<p>Paragraph two, continuing the story...</p>
</article><pre>Name Age
John 34
Sara 29</pre>Prefer
<div class="card">
<h3>Wireless Mouse</h3>
<p class="price">$24</p>
</div><article>
<p>Paragraph one of the story...</p>
<p>Paragraph two, continuing the story...</p>
</article>
<aside class="related-posts">Related: ...</aside><table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>John</td><td>34</td></tr>
<tr><td>Sara</td><td>29</td></tr>
</table>