- Success Criterion 1.4.10
- Conformance level AA
Desktop Hover Menu That Becomes Unreachable on Small Screens
1.4.10 — Reflow
Scenario
Setting
A streaming music app's search results
What’s wrong
Hover-dependent desktop menus retained at small widths where hover targets become unreachable (functionality lost).
Example
A streaming music app's search results is a good example: hover-dependent desktop menus retained at small widths where hover targets become unreachable (functionality lost).
Why it matters
Low-vision users at high zoom and people reading on narrow mobile viewports. On a streaming music app's search results specifically, they miss information conveyed only by color.
How to test
Set the viewport to 320px and try to open hover-dependent desktop menus: if the hover target becomes unreachable at small width with no tap alternative, 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 a streaming music app's search results 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
- 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