WCAG 2.2 · Success Criterion 1.4.10 · Level AA
How to check your page for reflow
Reflow passes if the page stays readable and complete on a 320 pixel screen, or at 400% zoom. Nothing disappears, nothing gets cut off, and the reader scrolls in one direction only.
Seven cases, each one built twice: a version authored to reflow correctly, and a version authored the way it commonly goes wrong. Open a pair at both test widths, watch which one breaks and why, then check your own pages for the same pattern.
A note on scope: these cases show that Flex reflows when a page is built to grow, and that it will let a page fail when content is pinned instead. Conformance is a property of each published experience rather than of the tool, so check your own pages at both test widths before you claim it.
01 · The standard
Three conditions to meet
Content survives 320px
All content and functionality stays available down to a 320 CSS pixel wide viewport, or at 400% zoom in a 1280 pixel window.
One scroll direction
On a page that scrolls vertically, the reader never has to scroll sideways to reach anything. Two-dimensional scrolling is a failure.
Nothing lost
No loss of content or functionality. Text is not clipped, controls still work, and nothing is hidden to make the layout fit.
02 · The method
How to run the test
Run both, and expect them to agree. Page zoom shrinks the CSS viewport, so 1280 pixels at 400% is roughly a 320 pixel viewport and your breakpoints fire the same way in either test. Zoom is how readers actually do this, so it stays worth running.
Test A · Zoom
1280px wide, zoomed to 400%
Set the browser window to 1280 pixels wide, then zoom the page to 400%. Scroll the whole page top to bottom and watch for text that collides or gets cut.
Test B · Narrow
320px viewport, no zoom
Resize the window to a 320 pixel viewport. If 320 sits below your narrowest breakpoint, that breakpoint’s layout still governs, squeezed further than you designed it for. That gap is where clipping hides.
03 · The verdict
Four things to look for
These four checks are how the three conditions above show up on screen. If any one of them fails at either test width, the page fails.
01
Everything is readable
Every word can be read at its rendered size, against its own background.
02
Nothing is cut off
No clipped words, no half-letters, no button with its label sliced through.
03
All controls still work
Every tab, toggle and expander can still be reached and operated at this width.
04
You scroll one direction only
Vertical or horizontal, but never both. A sideways scrollbar on a vertical page is a fail.
04 · The detail
Questions testers ask
It is a CSS pixel measurement, not a device pixel one. A 320 pixel viewport is roughly a small phone held upright. Below your narrowest breakpoint, that breakpoint’s layout keeps applying and simply gets squeezed, so test at your narrowest breakpoint and again at 320.
1280 divided by 4 is 320, so both tests describe the same effective space, and they behave more alike than people expect. Page zoom shrinks the CSS viewport, which means your breakpoints fire at 400% just as they do at 320 pixels. The test that holds the desktop layout while only the type grows is text-only zoom, and that is a different criterion: 1.4.4 Resize Text, at 200%.
Text clipped by a fixed-height box. A button whose label is sliced. A paragraph hidden behind an overlapping block. A control pushed off screen. Reordering content is fine, and so is hiding something that is genuinely duplicated elsewhere. Removing information to make the layout fit is not.
Content that genuinely requires a two-axis layout: data tables, complex diagrams and maps, and media such as video. The exemption covers the part that needs the two axes, not the whole page around it. Case RF-07 holds one of each, so you can see what a legitimate exception looks like before treating one as a defect.
05 · The cases
Case index
Seven cases, each a matched pair: one version built to reflow, one built to fail. Open a pair at 320 pixels and the difference shows up in a few seconds.