1.4.10 Reflow

Level AA · added in WCAG 2.1

Content must reflow to fit a viewport 320 CSS pixels wide without scrolling in two directions. For content that scrolls horizontally, the limit is a height of 256 CSS pixels.

Who it helps

People with low vision who zoom to 400% need text to wrap into one column. Without reflow, they must scroll sideways on every line, which makes reading slow and tiring. It also helps people on small phone screens.

How to meet it

Test in a desktop browser window 1280 CSS px wide at 400% zoom; that gives a 320 CSS px viewport.
Use responsive layouts with flexbox, grid and media queries so columns stack at narrow widths.
Replace fixed widths with max-width and percentages, for example max-width: 960px; width: 100%.
Let long words and URLs wrap with overflow-wrap: anywhere, and make images scale with max-width: 100%.
Keep sticky headers and footers small, since at 400% zoom they can cover most of the screen.
Content that needs a two-dimensional layout, such as data tables, maps, diagrams, video and games, is excepted; let that part scroll on its own while the rest of the page reflows.

Examples

Fails:A fixed-width layout forces horizontal scrolling at 320 CSS px

.page {
  width: 960px;
  margin: 0 auto;
}
.sidebar { float: left; width: 300px; }
.content { float: left; width: 660px; }

Passes:A fluid grid that collapses to one column on narrow viewports

.page {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 48em) {
  .page { grid-template-columns: 300px 1fr; }
}

Passes:A wide data table scrolls inside its own region, so the page itself does not

<div class="table-scroll" role="region"
     aria-labelledby="rates-cap" tabindex="0"
     style="overflow-x: auto">
  <table>
    <caption id="rates-cap">Shipping rates by zone</caption>
    <!-- rows -->
  </table>
</div>

Can a scanner detect this?

axe-core has no rule for reflow, because it depends on how the rendered page behaves at a 320 CSS px width. A person, or a visual test at that width, must check for horizontal scrolling, overlapping content and hidden features.

No automated rule tests this criterion. Check it by hand.

Common mistakes

Testing only in a phone emulator instead of at 400% browser zoom, which can miss oversized sticky elements and text that no longer fits.
Hiding content or features at narrow widths instead of reflowing them, which counts as a loss of content.
Setting min-width on the body or a wrapper, which forces horizontal scrolling on small viewports.
Using a sticky header that takes up most of the screen at 400% zoom.

Official W3C explanation of 1.4.10

Check your own page

See which automated WCAG checks your page fails, with the failing elements and how to fix them.

Reviewed November 2, 2026