• 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 

.lesson-panel { overflow: hidden; width: 100%; }
<!-- at 200% zoom, the "Next Lesson" button shifts outside the visible panel with no scrollbar to reach it -->

Why it matters

A learner zoomed in for readability can no longer find or reach the button needed to continue their lesson.

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

Switch overflow: hidden to overflow: auto on any ancestor that might clip content at higher zoom, so a scrollbar appears instead of losing the control.

.lesson-panel { overflow: auto; width: 100%; }

Outcome

The learner scrolls the panel at 200% zoom and reaches the next-lesson button without getting stuck.

Who is affected

Low-vision users, who lose access to core lesson functionality, not just some visual polish, once controls move off-screen.

Learn more

Related scenarios