- Success Criterion 1.4.10
- Conformance level AA
Overlapping Content When the Page Is Zoomed to 400%
1.4.10 — Reflow
Scenario
Setting
A music streaming app's playlist screen
What’s wrong
Content overlap at 400%: absolutely positioned elements colliding, text under images.
Example
Consider a music streaming app's playlist screen: content overlap at 400%: absolutely positioned elements colliding, text under images.
Why it matters
Low-vision users at high zoom and people reading on narrow mobile viewports. The practical effect on a music streaming app's playlist screen: they miss information conveyed only by color.
How to test
Zoom the browser to 400% (or set viewport to 320px): check for absolutely positioned elements colliding or text sitting under images.
How to fix
At 320 CSS px width (400% zoom on a 1280px desktop), content must reflow into one column with only vertical scrolling and nothing missing or unreachable.
Outcome
That one change on a music streaming app's playlist screen means they read the text clearly against its background.
Who is affected
Low-vision users at high zoom and people reading on narrow mobile viewports.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Content or Controls That Vanish Entirely When the Page Reflows
- Vertical Content That Forces Horizontal Scrolling at 320px
- Fixed-Width Container Forcing Scrolling in Two Directions
- Sticky Bars That Eat Up Most of a 320px Mobile Screen
- Desktop Breakpoint That Never Switches to Mobile Layout
- Long Unbroken Text or URL That Forces Horizontal Scrolling