Content reflow

Definition

Reflow is the way content wraps, stacks, resizes, or becomes locally scrollable as available width decreases or text enlarges. For ordinary vertical writing, the page should support reading and operation without horizontal page scrolling at the WCAG reflow boundary, apart from genuine two-dimensional content.

Layout causes

Fixed widths, automatic grid minimums, unbounded images, long strings, no-wrap rules, tables, and positioned controls commonly prevent reflow. Hiding overflow does not solve the problem; it may simply make content or focus indicators unreachable.

Legitimate exceptions

Maps, complex diagrams, video, data tables, and interfaces whose meaning depends on two dimensions may need local horizontal movement. Bound that movement to the component, label it, keep controls reachable, and avoid forcing the entire page to pan in both directions.

Review question

At 320 CSS pixels and 400% zoom where the test method calls for it, can a person read and complete the task by moving primarily in one direction? Test long translations, validation errors, enlarged default fonts, sticky regions, virtual keyboards, and dynamic content. Find the deepest overflowing element rather than masking the document scrollbar.

Repeat the pass after opening menus, displaying errors, loading real content, and showing the on-screen keyboard. Reflow is a property of every meaningful state, not only the clean initial screenshot. Preserve a regression at the viewport and state that exposed the defect.