1.3.2 Meaningful Sequence
Level: A | Principle: Perceivable | Since: WCAG 2.0 | Automation: Manual
What This Means
When the order of content affects its meaning, the DOM order must match the visual reading order. CSS techniques like flexbox order, grid placement, position: absolute, and float can rearrange content visually without changing the underlying source order. If the visual order differs from the DOM order, screen readers and keyboard users will encounter content in a confusing sequence.
This criterion ensures that the programmatic reading sequence preserves the same meaningful relationships as the visual presentation.
Who This Affects
- Screen reader users — they hear content in DOM order, not visual order, so a mismatch creates confusion
- Keyboard-only users — tab order follows DOM order by default, so visual reordering can make navigation illogical
- Users of assistive reading tools — tools that linearize content rely on DOM order making sense
- Users who disable CSS — they see raw DOM order, which must be coherent
Common Pitfalls
1. Using CSS flexbox order to rearrange content
<!-- Bad: visual order is "Step 2, Step 1, Step 3" but DOM order is "Step 1, Step 2, Step 3" -->
<div style="display: flex;">
<div style="order: 2;">Step 1: Enter your email</div>
<div style="order: 1;">Step 2: Choose a password</div>
<div style="order: 3;">Step 3: Confirm</div>
</div>
2. Using CSS grid to place items out of source order
<!-- Bad: sidebar appears first in DOM but visually appears on the right -->
<div style="display: grid; grid-template-columns: 1fr 300px;">
<aside style="grid-column: 2;">Related links</aside>
<main style="grid-column: 1;">Article content...</main>
</div>
<!-- Screen readers encounter the sidebar before the main content -->
3. Using absolute positioning to reorder content
<!-- Bad: heading is visually at the top but last in the DOM -->
<div style="position: relative;">
<p style="position: absolute; top: 40px;">First paragraph of content.</p>
<p style="position: absolute; top: 80px;">Second paragraph of content.</p>
<h1 style="position: absolute; top: 0;">Page Title</h1>
</div>
4. Float-based layouts that invert reading order
<!-- Bad: right-floated element appears first in DOM but visually appears last -->
<div>
<div style="float: right;">Call to action button</div>
<div>Main content that should be read first</div>
</div>
How to Fix
Match DOM order to visual order
<!-- Good: DOM order matches the visual reading sequence -->
<div style="display: flex;">
<div>Step 1: Enter your email</div>
<div>Step 2: Choose a password</div>
<div>Step 3: Confirm</div>
</div>
Fix grid layouts with correct source order
<!-- Good: main content first in DOM, then sidebar -->
<div style="display: grid; grid-template-columns: 1fr 300px;">
<main>Article content...</main>
<aside>Related links</aside>
</div>
Use semantic HTML structure
<!-- Good: heading before content, logical document flow -->
<article>
<h1>Page Title</h1>
<p>First paragraph of content.</p>
<p>Second paragraph of content.</p>
</article>
How to Test
- Disable CSS in the browser (DevTools > Elements > uncheck all stylesheets, or use a browser extension) and read the page content in its raw DOM order.
- Verify the content still makes logical sense when read top-to-bottom without any visual styling.
- Press Tab repeatedly through interactive elements and confirm the tab order matches the visual reading order (left-to-right, top-to-bottom in LTR pages).
- Check for CSS
flexbox order,gridplacement, orposition: absolutethat visually rearranges content differently from the DOM order. - Open a screen reader and navigate linearly through the page. Confirm the reading order matches the visual layout.
- Pass: Content reads in a logical sequence with CSS disabled, and tab order matches the visual reading order.
- Fail: Content is out of order when CSS is disabled, or tab order jumps around the page due to CSS reordering or positive
tabindexvalues.
axe-core Rules
No automated axe-core rules. This criterion requires manual testing.