- Success Criterion 1.3.2
- Conformance level A
Reading-Order Override That Contradicts the Actual Content Flow
1.3.2 — Meaningful Sequence
Scenario
Setting
A streaming music app's search results
What’s wrong
aria-flowto/reading-order overrides that contradict comprehension.
Example
<input type="search" id="q" aria-flowto="playAllBtn">
<ul id="results">
<li>Song A - Artist X</li>
<li>Song B - Artist Y</li>
</ul>
<button id="playAllBtn">Play all results</button> Why it matters
Some assistive tech lets a user jump straight from the search box to the Play All button, skipping past the actual list of matching songs entirely.
How to test
Inspect aria-flowto or explicit reading-order overrides in DevTools: read the page with a screen reader and confirm the override actually improves rather than contradicts comprehension.
How to fix
Drop the aria-flowto override and let the natural document order, which already lists results before the button, control the reading sequence.
<input type="search" id="q">
<ul id="results">
<li>Song A - Artist X</li>
<li>Song B - Artist Y</li>
</ul>
<button id="playAllBtn">Play all results</button> Outcome
Screen reader users now hear the matching songs before ever reaching the play all option.
Who is affected
Screen reader users relying on aria-flowto navigation can bypass the search results and never hear what they are about to play.
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
- CSS Reordering That Makes Code Order Differ From Visual Order
- Multi-Column Article Whose Code Order Interleaves the Columns