• Success Criterion 1.4.10
  • Conformance level AA

Fixed-Width Container Forcing Scrolling in Two Directions

1.4.10 — Reflow

Scenario

Setting

A language-learning app's lesson screen

What’s wrong

Fixed-width containers/tables (non-data), iframes, or embeds forcing 2D scroll.

Example

.layout { width: 1200px; }

Why it matters

Low-vision users at high zoom and people reading on narrow mobile viewports.

How to test

Set the viewport to 320px wide and inspect fixed-width elements (containers, non-data tables, iframes, embeds): any forcing two-directional scrolling 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. .layout { max-width: 1200px; width: 100%; } Content must reflow into one column at 320px wide with no horizontal scrolling and nothing missing.

Outcome

On a language-learning app's lesson screen, this barrier is gone for low-vision users at high zoom and people reading on narrow mobile viewports — they reach the same outcome without extra effort.

Who is affected

Low-vision users at high zoom and people reading on narrow mobile viewports.

Learn more