- Success Criterion 1.3.2
- Conformance level A
Lazy-Loaded Content Injected Out of Its Visual Order
1.3.2 — Meaningful Sequence
Scenario
Setting
A pharmacy app's prescription-refill form
What’s wrong
Infinite-scroll/lazy sections injected out of order relative to visual placement.
Example
Picture a pharmacy app's prescription-refill form: infinite-scroll/lazy sections injected out of order relative to visual placement.
Why it matters
Screen-reader and keyboard users who encounter content in DOM order. Here, on a pharmacy app's prescription-refill form, the result is they lose track of what belongs to what.
How to test
Scroll to trigger lazy-loaded/infinite-scroll content, then check the DOM: newly injected sections should appear in the DOM in the same order they appear visually.
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
After the fix, the same visitor to a pharmacy app's prescription-refill form can now understand how the page is organized.
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
- CSS Reordering That Makes Code Order Differ From Visual Order
- Multi-Column Article Whose Code Order Interleaves the Columns