Skip to content
1.4.10 · Level AA · WCAG 2.1 · Perceivable → Distinguishable

Reflow

Content reflows to a single column at a 320px-equivalent viewport width without requiring two-dimensional scrolling, except for content that is genuinely tabular (e.g. a data table or map).

Why it matters

This is the criterion behind 'is this site actually usable on a phone, zoomed in.' A fixed-width layout that forces horizontal panning at narrow widths is unusable for anyone using zoom plus a small viewport together.

Needs manual testing

Requires rendering at a narrow viewport and checking for horizontal scroll — a layout/viewport check outside what a static DOM rule can determine reliably.

Fails

<div style="width: 1024px; display: flex;">
  <!-- three fixed-width columns, never wrap -->
</div>

A hard-coded 1024px container forces horizontal scrolling on any viewport narrower than that, including every phone.

Passes

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));">
  <!-- columns collapse to one at narrow widths -->
</div>

auto-fit with a minmax track lets columns collapse into a single column instead of forcing horizontal scroll.

Openwell finds violations like this one across your whole site, clusters them by the component that caused them, and generates a fix that's re-validated before you see it.

Scan your site free
WCAG 1.4.10 Reflow — what it requires and how to fix it — Openwell