- Success Criterion 1.4.10
- Conformance level AA
Sticky Bars That Eat Up Most of a 320px Mobile Screen
1.4.10 — Reflow
Scenario
Setting
A budget airline's flight search results
What’s wrong
Sticky headers/footers/cookie banners consuming most of the 320px viewport, leaving no usable content area.
Example
This shows up on a budget airline's flight search results: sticky headers/footers/cookie banners consuming most of the 320px viewport, leaving no usable content area.
Why it matters
Low-vision users at high zoom and people reading on narrow mobile viewports. On a budget airline's flight search results, this barrier means they can't perceive part of the content because of how it's displayed.
How to test
Set the viewport to 320px and check sticky headers/footers/cookie banners: if they consume most of the available screen space, leaving little usable content area, 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
Corrected, a budget airline's flight search results now lets a visitor 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
- 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%
- Desktop Breakpoint That Never Switches to Mobile Layout
- Long Unbroken Text or URL That Forces Horizontal Scrolling