UX, Conversion & Accessibility

Reflow (WCAG 1.4.10)

Reflow is the WCAG 1.4.10 requirement that content remain usable at specified narrow viewport equivalents without unnecessary two-dimensional scrolling.

Reflow addresses a common problem for people who enlarge website content: text stretches beyond the visible window and forces users to pan horizontally for each line. WCAG 2.1 Success Criterion 1.4.10, at Level AA, requires content to remain available without two-dimensional scrolling at the equivalent of 320 CSS pixels for vertically scrolling content, or 256 CSS pixels in the other orientation, except where a two-dimensional layout is essential.

A useful practical check is to test a standard desktop page around 400% zoom from a 1280-pixel-wide viewport, or use an appropriately equivalent narrow viewport. Menus, dialog boxes, form fields and sticky elements need particular scrutiny. Data tables, maps and some complex interfaces can qualify for limited exceptions, but an exception for one component does not justify an entire page being difficult to read.

Reflow is more specific than general responsive web design, which adapts layouts across many device sizes. A responsive page can still fail Reflow when zoomed text, fixed widths or overlays cause information to disappear or demand back-and-forth panning.