- Success Criterion 1.3.2
- Conformance level A
1.3.2 · Meaningful Sequence
Lesson overview · Meaningful Sequence
In plain language
The reading order in the code must match the order that makes sense visually.
Who it affects
Screen-reader and keyboard users who encounter content in DOM order.
How to check
Read the page top-to-bottom with a screen reader (or disable CSS): the content must still make sense in that order.
Common misconception
CSS can rearrange what people see without changing what's in the code. A sighted user and a screen-reader user can end up experiencing two completely different reading orders from the same page.
Learn more
Scenarios in this lesson
- 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
- CSS Reordering That Makes Code Order Differ From Visual Order
- Multi-Column Article Whose Code Order Interleaves the Columns
- Prices or Labels Positioned Visually Near the Wrong Product in Code
- Modal Dialog Placed at the End of the Page Code
- Mixed-Direction Text That Scrambles the Reading Order
- Reading-Order Override That Contradicts the Actual Content Flow
- Form Instructions Placed After the Fields They’re Meant to Explain
- Print or PDF Export That Produces a Scrambled Reading Order
- Lazy-Loaded Content Injected Out of Its Visual Order
- Tab Order Used as a Stand-In for the Real Reading Sequence
- Heading or Sentence Split Into Disconnected Announced Fragments
- Separate Content Items Announced as One Run-On Block
- Hidden or Off-Screen Content Left in the Reading Order
- Empty Elements Making Screen Readers Announce ‘Blank’ Repeatedly
- Visible Page Text Completely Skipped by the Screen Reader
- Several Distinct Controls Merged Into One Announced Item