Reflow

Reflow is the ability of web content to reorganize itself to fit within the available viewport width without requiring horizontal scrolling. In accessibility terms, it specifically refers to WCAG Success Criterion 1.4.10, which requires content to be presentable at 320 CSS pixels wide (equivalent to 400% browser zoom on a standard 1280px viewport) without losing information or functionality and without needing to scroll in two directions simultaneously. When users with low vision zoom their browser to 400%, the viewport effectively becomes very narrow. Content must reflow from a multi-column layout to a single column, navigation must adapt, images must resize, and all functionality must remain operational. If content overflows horizontally and forces the user to scroll both vertically and horizontally to read a single passage of text, the reflow requirement is not met. Reflow is closely related to responsive web design, a development approach where layouts adapt to different screen sizes using CSS media queries, flexible grids, and fluid images. A well-implemented responsive design typically satisfies the reflow criterion because the same techniques that make a site work on a mobile phone also make it work at high zoom levels on a desktop.

People with low vision frequently zoom their browser or use screen magnification software to enlarge text and UI elements to a readable size. When zoomed to 300% or 400%, the effective viewport becomes very narrow. Without reflow, these users face a broken layout: text runs off the right edge of the screen, requiring constant horizontal scrolling to read even a single sentence. This back-and-forth scrolling is exhausting, disorienting, and makes content nearly impossible to consume. WCAG 1.4.10 (Reflow) is a Level AA criterion, meaning it is included in most accessibility compliance targets. It was introduced in WCAG 2.1 to address a real and widespread barrier. Prior to this criterion, many sites would break at high zoom levels, forcing low vision users to choose between content they could read (by zooming) and content they could navigate (by not zooming). Reflow also benefits users on small screens, users who prefer large text sizes configured in their operating system, and users of assistive technologies that present content in narrow viewports.

Achieving reflow is fundamentally about building layouts that adapt to narrow widths. The key techniques include: **Use relative units instead of fixed widths.** Avoid `width: 960px` or similar fixed-pixel layouts. Use percentage widths, `max-width`, `min-width`, and viewport units to create fluid layouts. ```css /* Fluid container that reflows */ .container { max-width: 1200px; width: 100%; padding: 0 1rem; } ``` **Use CSS media queries** to adjust layouts at different widths: ```css /* Multi-column at wide viewports */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); } /* Single column at narrow viewports (high zoom) */ @media (max-width: 320px) { .grid { grid-template-columns: 1fr; } } ``` **Make images responsive** so they scale within their containers: ```css img { max-width: 100%; height: auto; } ``` **Avoid horizontal overflow.** Ensure no element forces the page to be wider than the viewport. Long URLs, pre-formatted code blocks, and wide tables are common culprits. **Handle navigation at narrow widths.** A horizontal navigation bar that works at full width may overflow at 320px. Provide a hamburger menu or other compact navigation pattern. **Testing reflow** is straightforward: set your browser window to 1280px wide and zoom to 400%, or resize the browser window to 320px wide. Navigate through all content and verify that no horizontal scrollbar appears (except for exempt content), all text is readable without horizontal scrolling, all functionality remains operational, and no content is cut off or hidden. **Exceptions to the reflow requirement** include content that inherently requires two-dimensional layout: data tables, maps, diagrams, images that need minimum dimensions to be understandable, toolbars with many controls, and editing interfaces where spatial layout is functional. These elements may individually scroll horizontally while the overall page still reflows.