SC 1.4.10 - What does "Reflow" mean?

Someone with reduced vision zooms to 400%. On a page that does not adapt, reading now means scrolling right, then back left, then right again, once per line. Everybody gives up after two paragraphs. WCAG says: content has to fit the screen without scrolling in two directions.

What the criterion says

Success criterion 1.4.10 Reflow (level AA) requires that content can be presented without loss of information or functionality, and without scrolling in two dimensions, at a width equivalent to 320 CSS pixels.

That 320 sounds arbitrary until you do the arithmetic: it is 400% zoom on a 1280 pixel wide window, which was a standard screen width when the criterion was written. It is also roughly the width of a narrow phone. At that width the content has to rearrange itself into a single column, so the user scrolls vertically only. That rearranging is what “reflow” means.

For content that scrolls horizontally by nature, such as a timeline, the mirror rule applies: it has to fit within 256 pixels of height without vertical scrolling.

Why this matters

• People with reduced vision commonly zoom to 200%, 300% or 400%. Without reflow they have to scroll horizontally on every single line, which is unworkable in practice. With reflow they read a narrow column, exactly like on a phone.
• Horizontal scrolling is a motor problem too. Dragging back and forth precisely is hard, and it is easy to lose your place in the text.
• A large share of your visitors are on a phone anyway. A site that reflows well is better for all of them.

What is not required

• You do not need a separate mobile site. One responsive site is precisely what this asks for.
• The layout does not have to stay beautiful. Columns may stack, whitespace may collapse. Readable and operable is the bar.
• Some content may scroll in two directions. Content that loses its meaning when squeezed into one column is exempt: data tables, maps, diagrams, images, video, and toolbars such as an editor’s. The scrolling has to happen inside that element, not on the page as a whole.

Mistakes we keep finding

A fixed pixel width somewhere. One element at 600 pixels is enough to make the entire page scroll sideways, and it is usually one element, not the layout.

Content cut off by overflow: hidden. The page stops scrolling, which looks like a fix, and the text that did not fit is simply gone.

Text clipped by a fixed height. On a narrow screen text gets taller. If the container does not grow with it, the last lines disappear.

Functionality that vanishes on small screens. A filter, a comparison table, a download button that is simply absent in the mobile view. That is loss of functionality, and it is a failure even if nothing looks broken.

Sticky elements eating the viewport. A fixed header plus a cookie bar can take three quarters of the screen at 400% zoom, leaving a sliver of content.

Images and iframes breaking out of their column. An embedded video or map with a fixed width pushes the page wider than the screen.

How to test it

Turn on reflow (320 px) in WCAG Radar. It checks for horizontal scrolling at page level, marks the elements that extend off screen, and opens the page in a 320 pixel wide window. The marking is the useful part: knowing that the page scrolls sideways tells you there is a problem, and knowing which element causes it tells you where to go.

Page zoom 200% (640 px) is worth running alongside it. It opens the page at the layout you get from 200% zoom on a 1280 pixel window, with the same media queries and the same collapsed components, which catches the halfway breakages that only show up between the desktop and mobile layouts.

Then check by hand, because reflow is about whether things still work, not only whether they fit:

• Can you read all ordinary text without scrolling sideways?
• Is everything still there, or has something been clipped or dropped?
• Do the menu, buttons, filters and forms all still work?
• Is there enough screen left next to the fixed bars?

Who does what

• Designers design the narrow variant of every page and component. What is not designed at 320 pixels gets improvised by whoever builds it. Decide what stacks and in what order, and keep fixed elements small.
• Developers put max-width: 100% on media, avoid fixed widths on layout elements, use min-height rather than height on anything containing text, and never hide functionality in a media query.
• Editors avoid layout tables and wide images with text baked into them, and test their own pages on their own phone.

The table case comes up often enough to be worth the snippet:

<div class="table-scroll" tabindex="0" role="region" aria-label="Rates per audit">
  <table>...</table>
</div>

.table-scroll {
  overflow-x: auto;
}

The tabindex="0" matters. A scroll container that a keyboard user cannot reach is a new problem in place of the old one.

Frequently asked questions

Is a table allowed to scroll horizontally?

Yes. Data tables are one of the exceptions, because stacking the columns destroys the relationships. Make sure only the table scrolls, inside its own container, and not the whole page.

Is a responsive site automatically compliant?

Mostly, but not by default. Responsive sites still fail on fixed heights that clip text, embedded content with a fixed width, and functions that disappear in the mobile view. Testing at 320 pixels stays necessary.

Why 320 pixels exactly?

It is 400% zoom on a 1280 pixel window, and it is also about the width of a narrow phone. If your site works at 320 CSS pixels it works for practically everyone who zooms.

May I drop things in the mobile view?

No. The criterion asks for reflow without loss of content or functionality. You may present a function more compactly, for example behind a disclosure button, but it may not disappear.

What is the difference with SC 1.4.4?

SC 1.4.4 Resize Text is about enlarging text to 200% and asking whether everything stays readable and operable. This one goes further: at 400% zoom, or 320 pixels wide, the content has to rearrange into one column. In practice you test them in the same sitting.

Summary

• Content fits 320 CSS pixels wide, equivalent to 400% zoom, with vertical scrolling only.
• Data tables, maps and diagrams may scroll, but only inside their own element.
• Nothing may be lost. Compacting a function is allowed, removing it is not.
• max-width: 100% on media, no fixed widths on layout, min-height instead of height on text containers.
• Check with the reflow (320 px) and page zoom 200% (640 px) checks in WCAG Radar.

A tool can tell you the page scrolls sideways and which element did it. Whether a filter that disappeared on mobile counts as lost functionality is a judgement about what the page is for. Ask us for a quote if you want every template checked at 400%.