WCAG 2.1 · Level A · Perceivable
WCAG 1.3.2 — Meaningful Sequence, explained with examples
When the sequence in which content is presented affects its meaning, a correct reading sequence must be programmatically determinable. CSS can rearrange visual layout (flexbox, grid, absolute positioning) without changing DOM order. Screen readers follow DOM order; if the two diverge, the page makes no sense in audio.
- Number
- 1.3.2
- Level
- A
- Principle
- Perceivable
- Guideline
- 1.3 Adaptable
Why this criterion exists
CSS can rearrange visual layout (flexbox, grid, absolute positioning) without changing DOM order. Screen readers follow DOM order; if the two diverge, the page makes no sense in audio.
If you only remember one thing: when the sequence in which content is presented affects its meaning, a correct reading sequence must be programmatically determinable. Everything else on this page is detail.
Who feels it when this fails
Accessibility criteria sometimes feel abstract until you see who pays the cost when a site ignores them. Meaningful Sequence affects:
Screen reader users
Users with reading-mode tools
How sites typically fail it
These are the patterns we see week after week. None are intentional — they are accidents of how teams build interfaces under deadline. Knowing the failure modes is the fastest path to writing them out of your component library.
Visual two-column layout where the left column reads first visually but appears second in DOM
order: 99 in flex containers
How to test for it
Disable CSS; the page should still read in a sensible order.
Automated scanners catch this criterion most of the time, but never all of the time. Manual testing with the keyboard and a screen reader closes the gap.
A code fix you can copy
Put DOM in reading order; use CSS only for visual position adjustments that match the meaning.
The problem
<div class="flex">
<div style="order: 2">Body content</div>
<aside style="order: 1">Sidebar</aside>
</div>The fix
<div class="flex">
<aside>Sidebar</aside>
<div>Body content</div>
</div>Put DOM in reading order; use CSS only for visual position adjustments that match the meaning.
Frequently asked questions
How do CSS Grid and Flexbox affect 1.3.2?
Grid and Flexbox order the DOM independently of the visual layout. The CSS order property and grid-area placement can make a DOM-second element appear visually first. Screen readers and keyboard navigation follow DOM order, not visual order. Any time you use order or grid placement to reposition an element significantly, verify that the DOM sequence still makes sense when read top to bottom.
Is the reading sequence just about headings?
No — it covers all content where order matters. A step-by-step process must have steps in the right sequence. A dialogue or Q&A must have question before answer. A navigation bar placed above the logo in the DOM but visually below it creates a mismatch. The test: disable CSS and read the raw DOM — it should tell a sensible story.
Other Perceivable criteria
1.1.1 Non-text Content
Perceivable · Level A
1.3.1 Info and Relationships
Perceivable · Level A
1.4.3 Contrast (Minimum)
Perceivable · Level AA
1.4.11 Non-text Contrast
Perceivable · Level AA
All WCAG 2.1 criteria
Browse the full index by principle
Complete WCAG 2.1 guide
POUR principles, conformance levels, legal requirements
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.