WCAG 2.2 - Success Criterion
1.3.2 Meaningful Sequence
Description
If the sequence in which content is presented affects its meaning, a correct reading sequence must be programmatically determinable. This means the order in which a screen reader or other assistive technology encounters content in the DOM must match the logical reading order that conveys the intended meaning. When visual layout is achieved with CSS positioning or tables, the underlying code order must still be meaningful.
How To Test
- Open the page and disable CSS (using browser developer tools or a browser extension).
- Read through the page content without styling and verify it still flows in a logical, meaningful order.
- Enable a screen reader (such as NVDA or VoiceOver) and use the arrow keys to read through the page linearly.
- Check that the reading sequence matches the intended logical sequence of the content.
- Inspect the DOM using browser developer tools and compare the source order to the visual order.
- Look for use of CSS properties such as
position: absolute,float,flex-direction: row-reverse, or CSS Gridorderthat may create a discrepancy between visual and DOM order.
Testing Tools
- NVDA — Free screen reader for Windows. Download, install, and open Firefox to test the demo. Navigate using Tab and arrow keys, and listen to role, name, and state announcements from the page.
- VoiceOver (macOS) — Built into macOS. Enable with Cmd+F5, then open Safari or Chrome to test the demo. Use VO+arrow keys to navigate and hear semantic structure announcements.
- Lighthouse — Browser accessibility audit in Chrome DevTools. Open DevTools (F12), go to Lighthouse, run the audit to identify semantic and labeling issues.
Demo
The steps look ordered 1→2→3, but press Tab to see the actual keyboard order: 3→1→2. CSS order property reorders visuals without changing the DOM.
Tab sequence: Step 3 → Step 1 → Step 2
Press Tab - the keyboard order follows the visual order 1→2→3. DOM order matches the intended reading sequence.
Tab sequence: Step 1 → Step 2 → Step 3
Code
Instructions and important information are marked display: none in CSS, hidden from both screen readers and keyboards:
Shipping Information
Shipping options are not listed because they are hidden with CSS display: none.
Important information is in the correct DOM order and visible to all users:
Shipping Information
Standard Shipping: 5-7 business days, Free
Code
Tab through this toolbar. Hidden and empty elements receive focus, announced as "blank" or "Close" — even though they're invisible. Found in 15 real-world audits.
Tab order: Home → Products → (blank) → (invisible Close) → Contact
Hidden elements use display:none (not visibility:hidden) and empty spans have no tabindex. Only visible elements receive focus.
Tab order: Home → Products → Contact. No ghost focus stops.
Code
WCAG Techniques
- Failure: F34 (Using white space characters to format tables in plain text content)
- Success Techniques: H56 (Using the dir attribute on an inline element to resolve problems with nested directional runs), C6 (Positioning content based on structural markup)
Fail Explanation
A failure occurs when CSS positioning, floats, or layout tables cause content to be read in a different order than it appears visually, resulting in nonsensical or confusing output for screen reader users. For example, if a sidebar column appears visually after a main content block but is positioned before it in the DOM, screen reader users will encounter sidebar navigation or advertisements before the main page content, disrupting comprehension.
Pass Explanation
A passing implementation ensures that the DOM order of content reflects the logical reading sequence. When CSS is disabled or a screen reader reads the page linearly, the content still flows in a meaningful order. Authors achieve this by writing HTML in the correct order and using CSS only for visual presentation, not to reorder content that has semantic relationships.
Notes
The criterion only applies when the sequence matters for understanding; purely decorative content with no reading-order dependency is not in scope. CSS order and grid-template-areas are common sources of meaningful sequence failures in modern layouts.
Techniques
WCAG techniques used in this demo: C6, H34, H58
Suggested Solutions & References
Curated from 28 real-world audit findings and official WCAG guidance.
Official W3C / WAI
- Understanding SC 1.3.2: Meaningful Sequence
- Technique C6: Positioning content based on structural markup