- Success Criterion 1.4.4
- Conformance level AA
Controls Pushed Off-Screen and Unreachable After Zooming
1.4.4 — Resize Text
Scenario
Setting
A language-learning app's lesson screen
What’s wrong
Functionality loss: controls pushed off-screen with overflow:hidden (style that clips overflowing content) ancestors and no scroll access.
Example
Consider a language-learning app's lesson screen: functionality loss: controls pushed off-screen with overflow:hidden (style that clips overflowing content) ancestors and no scroll access.
Why it matters
Low-vision people who enlarge text instead of using a screen reader. On a language-learning app's lesson screen, that means they miss information conveyed only by color.
How to test
Set zoom to 200% and Tab through controls: if any get pushed off-screen behind an overflow:hidden ancestor with no scroll path to reach them, it fails.
How to fix
At 200% text size/zoom, all content and controls must remain visible, readable, and usable — nothing clipped, overlapped, or lost.
Outcome
With the fix in place on a language-learning app's lesson screen, they tell the information apart without relying on color.
Who is affected
Low-vision people who enlarge text instead of using a screen reader.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Text and Controls That Get Cut Off at 200% Zoom
- Form Fields That Don’t Grow When Text Is Enlarged
- Font Size Set in Viewport Units That Ignores Browser Zoom
- Viewport Meta Tag That Disables Pinch-to-Zoom on Mobile
- Fixed-Height Containers That Clip Content at 200% Zoom
- Button or Nav Text That Overflows Its Fixed-Size Container