- Success Criterion 1.3.2
- Conformance level A
CSS Reordering That Makes Code Order Differ From Visual Order
1.3.2 — Meaningful Sequence
Scenario
Setting
A job board's application form
What’s wrong
CSS order, flex-direction: *-reverse, or grid placement re-arranging content so page code (DOM) order tells a different story.
Example
On a job board's application form, a visitor hits this wall: CSS order, flex-direction: *-reverse, or grid placement re-arranging content so page code (DOM) order tells a different story.
Why it matters
Screen-reader and keyboard users who encounter content in DOM order. On a job board's application form, this barrier means they lose track of what belongs to what.
How to test
Disable CSS entirely and compare the DOM order to what you expect: CSS order, flex-direction reverse, or grid placement that reorders content visually but not in the DOM fails.
How to fix
The screen reader must read content in an order matching the visual/logical order, item by item — nothing skipped, merged, fragmented, or added.
Outcome
Corrected, a job board's application form now lets a visitor move through the content with confidence.
Who is affected
Screen-reader and keyboard users who encounter content in DOM order.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- CSS Layout Changes That Scramble the Screen Reader’s Reading Order
- Word Spelled Out Letter by Letter Instead of Read as a Word
- Text Columns Faked With Spaces Read Aloud Out of Order
- Layout Table That Reads in a Nonsensical Order When Linearized
- Multi-Column Article Whose Code Order Interleaves the Columns
- Prices or Labels Positioned Visually Near the Wrong Product in Code