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

html { font-size: 14px; } /* fixed px, breaks at 200% browser zoom */

Why it matters

Low-vision people who enlarge text instead of using a screen reader.

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. html { font-size: 100%; } body { font-size: 1rem; } /* scales with zoom */ Text sized in rem/em scales when the user zooms; hard-coded pixel sizes can get clipped or overlap.

Outcome

On a language-learning app's lesson screen, this barrier is gone for low-vision people who enlarge text instead of using a screen reader — they reach the same outcome without extra effort.

Who is affected