Content Reflow Failure

Content reflow failure occurs when a web page requires horizontal scrolling to read content at a viewport width of 320 CSS pixels (equivalent to 400% zoom on a 1280px display). WCAG Success Criterion 1.4.10 (Level AA) requires that content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions, except for content that requires two-dimensional layout for usage or meaning (such as data tables, maps, or diagrams).

This criterion ensures that users who zoom in significantly -- typically low-vision users who need large text -- can read content by scrolling in only one direction. For horizontal text, this means vertical scrolling only; the content must reflow to fit within the viewport width. A page that forces horizontal scrolling at 320px width fails this requirement.

Common causes include: fixed-width containers that cannot shrink below a certain size, images without max-width: 100%, text set in large fixed pixel sizes that cannot wrap, horizontal navigation bars that do not collapse into a mobile menu, and CSS that uses viewport width units without proper constraints. Essentially, any layout that does not responsively adapt to a narrow viewport will fail this criterion.

Low-vision users who zoom to 400% or more are the primary audience for this criterion. At 400% zoom on a 1280px display, the effective viewport is 320px -- the same as a small mobile phone. If the content does not reflow to this width, users must scroll both horizontally and vertically to read, a complex and disorienting navigation pattern that makes reading extremely difficult.

Horizontal scrolling while reading text is cognitively demanding. The user reads a line to the right edge, scrolls back to the left to find the start of the next line, and repeats for every line. This is exhausting and error-prone, with users frequently losing their place. For long-form content, it makes reading practically impossible.

This criterion also benefits mobile users, who view content at narrow viewport widths by default. A page that reflows properly for WCAG 1.4.10 will also work well on mobile devices, making responsive design and accessibility mutually reinforcing goals.

Scrutia renders every page at a viewport width of 320px and detects horizontal overflow. It identifies elements that extend beyond the viewport, images that do not scale down, and containers with fixed widths that prevent reflow. Each finding includes the overflowing element, its computed width, and a CSS fix to enable proper reflow.