- Success Criterion 1.4.10
- Conformance level AA
Fixed-Width Container Forcing Scrolling in Two Directions
1.4.10 — Reflow
Scenario
Setting
A language-learning app's lesson screen
What’s wrong
Fixed-width containers/tables (non-data), iframes, or embeds forcing 2D scroll.
Example
On a language-learning app's lesson screen, a visitor hits this wall: fixed-width containers/tables (non-data), iframes, or embeds forcing 2D scroll.
Why it matters
Low-vision users at high zoom and people reading on narrow mobile viewports. In this case (a language-learning app's lesson screen), they can't read the text against its background.
How to test
Set the viewport to 320px wide and inspect fixed-width elements (containers, non-data tables, iframes, embeds): any forcing two-directional scrolling 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
Once corrected, a language-learning app's lesson screen lets them tell the information apart without relying on color.
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
- 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