WCAG 1.4.10 Reflow

What it asks

People with low vision zoom a long way in. At 400 percent, a window 1280 pixels wide behaves like a screen 320 pixels wide. If the page does not reflow to that width, every line of text runs off the edge, and reading means scrolling right to finish each line and left to start the next. That is scrolling in two dimensions, and this rule forbids it.

The numbers are precise. Content that scrolls vertically must work at a width equivalent to 320 CSS pixels. Content that scrolls horizontally, such as vertical text in some languages, must work at a height equivalent to 256 CSS pixels. The W3C notes that 320 is 1280 at 400 percent zoom, and 256 is 1024 at 400 percent.

Some content needs two dimensions to make sense, and that content is excepted. The W3C gives examples: images needed for understanding such as maps and diagrams, video, games, presentations, data tables as a whole (not single cells) and interfaces where a toolbar has to stay in view while content is edited. For those parts, two-dimensional scrolling is acceptable. The rest of the page still has to reflow around them.

The rule also says nothing may be lost. A page that fits the width by hiding half its content has not reflowed. Content can move, for example into a menu behind a button, as long as it can still be reached.

Its official name is success criterion 1.4.10 Reflow, at Level AA. It was added in WCAG 2.2, under guideline 1.4 Distinguishable and the principle Perceivable. The W3C’s normative text says, in part:

“Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:”

From WCAG 2.2, W3C. Full explanation: Understanding 1.4.10 Reflow.

Who it helps

People with low vision who use high levels of zoom instead of, or as well as, a screen magnifier. Reading a line that runs off the screen by scrolling back and forth is slow and tiring and it is easy to lose your place.

People with some cognitive and reading disabilities, who find it hard to keep track of a line that leaves the screen, and everyone reading on a narrow phone.

What passes and what fails

These pass

• A responsive page whose columns stack into one at narrow widths.
• A navigation bar that collapses into a menu button, where the button opens every item.
• A wide data table that scrolls sideways inside its own box, while the page around it fits the width.
• A map that scrolls in two directions, with the page content reflowing above and below it.
• A code block that wraps its lines at narrow widths.

These fail

• A container with a fixed min-width of, say, 1024 pixels, so the whole page scrolls sideways at 320.
• A wide data table dropped straight into the page with no responsive treatment, pushing the page wider than the screen.
• A sticky sidebar that never collapses and leaves the main content a few characters wide.
• A paragraph of prose inside a pre element that scrolls sideways instead of wrapping.
• A layout that hides the sidebar at narrow widths, with no way to reach what was in it.

How to test it by hand

1. On a desktop browser, set the window to 1280 pixels wide and zoom to 400 percent. Alternatively, use the browser’s responsive design mode and set the width to 320 CSS pixels.
2. Scroll down the whole page. Note any point where a horizontal scrollbar appears for the page as a whole, and which element caused it.
3. For each element that scrolls sideways, ask whether it is a map, a diagram, a video, a game, a presentation, a data table or a toolbar that must stay in view. Only those are excepted, and the exception covers the element, not the page.
4. Check that nothing has gone missing. Compare the content and controls with the full-width page. Anything that has disappeared must be reachable another way, such as a menu button.
5. Try every control at the narrow width.
6. Note every element that forced sideways scrolling, and whether it can claim an exception.

What automated testing can decide

What a machine can decide

Whether a page scrolls sideways at 320 CSS pixels is a measurement. A tool can view the page at that width and name the element that pushes it wider than the screen. Comparing what is on the page at the narrow width with what is there at full width shows what disappeared.

What it cannot

Two things take judgement. Whether a wide element can claim an exception depends on what it is: a block of code may be an ASCII diagram, which needs two dimensions, or a long listing, which does not, and the markup looks the same. And whether content that disappeared at the narrow width is lost or merely moved depends on whether some control, such as a menu button, still reveals it. Deciding that takes a person.

How Dreven handles it

Dreven looks at your pages at a narrow width and shows you anything that forces sideways scrolling or disappears, with the element, the page and a picture at that width.

A reviewer decides each result, including whether one of the criterion’s exceptions holds, and signs the report. The report says how each result was decided.

No automated check makes a site conform. In Dreven, a person reviews the results and signs the report.

Related criteria

• 1.4.4 Resize Text (Level AA). Text must resize to 200 percent without loss. Reflow goes to 400.
• 1.4.12 Text Spacing (Level AA). Wider spacing must not break the layout either.
• 1.3.4 Orientation (Level AA). Content must work in both orientations.
• 1.4.8 . The AAA rule on presenting blocks of text.

Questions people ask

All WCAG 2.2 criteria, in plain words