- Success Criterion 1.4.10
- Conformance level AA
Nested Scroll Area Requiring Scrolling in Both Directions
1.4.10 — Reflow
Scenario
Setting
A customer-support live-chat widget
What’s wrong
Zoom traps: content requiring both directions of scroll inside nested scroll containers.
Example
A customer-support live-chat widget runs into this exact issue: zoom traps: content requiring both directions of scroll inside nested scroll containers.
Why it matters
Low-vision users at high zoom and people reading on narrow mobile viewports. Here, on a customer-support live-chat widget, the result is they can't perceive part of the content because of how it's displayed.
How to test
Set the viewport to 320px and scroll within nested scroll containers: if reaching content requires scrolling both horizontally and vertically inside a nested box, 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
After the fix, the same visitor to a customer-support live-chat widget can now 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
- 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