1.4.10 Reflow

WCAG 2.2 · 1.4.10 AA Perceivable

What it requires

Content must reflow so it can be presented without loss of information or functionality, and without requiring scrolling in two dimensions. The benchmark is a viewport of 320 CSS pixels wide for content that scrolls vertically (equivalent to a 1280px-wide page zoomed to 400%), or 256 CSS pixels tall for content that scrolls horizontally.

In practice this means a single page should collapse into a single column and scroll in only one direction. Users should never have to scroll both left–right and up–down to read a block of text. The one exception is content that genuinely needs a two-dimensional layout to be usable — data tables, maps, diagrams, code listings, and interfaces with toolbars.

  • Low-vision users who enlarge text or zoom the browser to 200–400% and otherwise face horizontal scrolling on every line.
  • Screen-magnifier users, for whom two-dimensional scrolling makes it easy to lose place and miss content.
  • Mobile and small-screen users, since a layout that reflows at 320px is essentially a responsive layout.
  • Anyone with cognitive or reading disabilities who benefits from a simple, linear reading flow.

How to detect it

Ways to check Reflow
Method What to do Catches it?
Browser zoom Set the window to 1280px wide and zoom to 400%; or use device emulation at 320 CSS px. Read top to bottom. Yes — primary manual check.
Two-dimensional scroll Look for any horizontal scrollbar on text content. Only data tables, maps, and code may legitimately need it. Yes.
Loss of content Confirm nothing is clipped, hidden, or overlapping once reflowed. Yes — manual judgement.
Automated tools axe / Lighthouse flag fixed widths and maximum-scale/user-scalable=no hints, but cannot confirm a usable reflow. Partial — manual verification required.

How to fix it

  1. Use relative units (%, rem, fr, viewport units) and max-width instead of fixed pixel widths on containers.
  2. Let layouts wrap with CSS Flexbox or Grid and add breakpoints so multi-column layouts collapse to one column on narrow viewports.
  3. Never disable zoom — remove user-scalable=no and any maximum-scale below 5 from the viewport meta tag.
  4. Allow long content (tables, code, images) that needs width to scroll inside its own region rather than forcing the whole page to scroll horizontally.
  5. Re-test at 320 CSS px / 400% zoom after each change.
<!-- Allow zoom; never disable scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  .layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem;
  }
</style>

Copy-paste tests

Automated coverage

There is no fully automated axe-core rule that confirms 1.4.10 Reflow. Reflow depends on whether content stays usable without two-dimensional scrolling at a 320 CSS-pixel-wide viewport, which requires manual review using the console check and steps below.

Run this in the browser console

reflow-suspects.js 
// Read-only: flags elements wider than the viewport that force horizontal scroll.
const vw = document.documentElement.clientWidth;
const suspects = [...document.querySelectorAll('*')].filter(el => {
  const r = el.getBoundingClientRect();
  return r.width > vw + 1 || r.right > vw + 1;
}).map(el => {
  el.style.outline = '2px solid red'; // visual only, not saved
  return { tag: el.tagName, cls: el.className, width: Math.round(el.getBoundingClientRect().width) };
});
console.table(suspects);
console.log('Set the viewport to 320px wide first, then re-run.');

What to check manually: at a 320 px-wide viewport, confirm no content or function requires horizontal scrolling, and that meaning is preserved (e.g. data tables and figures still read correctly) rather than just clipped or overlapping.