- Success Criterion 1.4.10
- Conformance level AA
Vertical Content That Forces Horizontal Scrolling at 320px
1.4.10 — Reflow
Scenario
Setting
An online clothing store's product listing page
What’s wrong
Horizontal scrolling required for vertically-scrolling content at 320 CSS px (400% zoom on 1280) — fixed-width layouts.
Example
Open an online clothing store's product listing page and this is what you'll see: horizontal scrolling required for vertically-scrolling content at 320 CSS px (400% zoom on 1280) — fixed-width layouts.
Why it matters
Low-vision users at high zoom and people reading on narrow mobile viewports. On an online clothing store's product listing page specifically, they can't perceive the control's boundary or state.
How to test
Set the viewport to 320px wide: if a horizontal scrollbar appears for content that should scroll only vertically, it fails.
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
Fixed, a visitor to an online clothing store's product listing page can see the control's boundary and current state.
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
- Fixed-Width Container Forcing Scrolling in Two Directions
- Overlapping Content When the Page Is Zoomed to 400%
- 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