Level A
Perceivable
WCAG 2.0+
Success Criterion 1.3.2: Meaningful Sequence
Official W3C Definition
When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
Why This Criterion Matters
Screen readers read content in DOM (Document Object Model) order, not visual order. If CSS positions elements differently than their source order, screen reader users may receive content in a confusing sequence.
- DOM order matters: Assistive technology follows the HTML source order
- CSS can deceive: Visual layout may differ from reading order
- Meaning depends on sequence: Instructions must come before actions
Who Benefits
Screen Reader Users
Content is read in logical order, not visual layout order.
Keyboard Users
Tab order follows logical sequence through the page.
Cognitive Disabilities
Logical flow aids comprehension and reduces confusion.
Mobile/Responsive Users
Content reflows logically at different screen sizes.
How to Meet This Criterion
Technique 1: Match DOM Order to Visual Order
Good Example - Logical Source Order
<!-- HTML in logical reading order -->
<article>
<h1>Article Title</h1>
<p class="byline">By Jane Smith | March 15, 2024</p>
<p>First paragraph of content...</p>
<p>Second paragraph of content...</p>
<aside class="sidebar">
<h2>Related Articles</h2>
<!-- Sidebar content -->
</aside>
</article>
<!-- CSS positions sidebar visually, but reading order is preserved -->
<style>
article { display: flex; flex-wrap: wrap; }
.sidebar { order: -1; } /* Visually first, but read after main content */
</style>
Bad Example - Confusing Source Order
<!-- HTML in wrong order, relying on CSS to fix visually -->
<div class="footer">Copyright 2024</div>
<div class="main-content">Page content here</div>
<div class="header">Site Header</div>
<!-- CSS positions correctly visually, but screen readers
read footer first, then content, then header -->Technique 2: Use CSS Flexbox/Grid Carefully
Good Example - Flexbox with Preserved Order
<!-- When visual order can differ from reading order -->
<nav class="breadcrumbs">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li aria-current="page">Widget</li>
</ol>
</nav>
<!-- Reading order: Home > Products > Widget (logical) -->Technique 3: Multi-Column Layouts
Good Example - Proper Column Order
<!-- Source order: main content first, sidebar second -->
<main>
<article>
<h1>Main Article</h1>
<p>Primary content that users need first...</p>
</article>
</main>
<aside>
<h2>Sidebar</h2>
<p>Supplementary information...</p>
</aside>
<!-- CSS can position sidebar left, main right -->Common Failures to Avoid
| Failure | Problem | Solution |
|---|---|---|
| Using CSS to reorder content | Reading order doesn't match visual order | Place content in logical order in HTML |
| Using tabindex to fix order | Creates maintenance issues and confusion | Fix the source order instead |
| Instructions after the action | Users act before reading instructions | Place instructions before related controls |
| Floating elements disrupting flow | Content reads out of context | Test reading order after CSS changes |
Testing Methods
Testing Steps
- Disable CSS: View page without styles - is content still in logical order?
- Screen reader test: Navigate the page - does content make sense in the order presented?
- Tab through page: Does focus move in a logical sequence?
- Check flexbox/grid: Look for CSS
orderproperties that might disrupt sequence
Browser Tools
- Firefox: View > Page Style > No Style
- Chrome DevTools: Disable CSS using Sources panel
- Web Developer extension: CSS > Disable All Styles
Related Criteria
1.3.1 Info and Relationships
Semantic structure conveys meaning
2.4.3 Focus Order
Focus sequence preserves meaning