Level AA

Any fixed-pixel element wider than 320 CSS px forces low-vision users at 400% zoom to scroll in two dimensions at once, breaking line-by-line reading.

1.4.10 Reflow

In Plain Language

1.4.10 Reflow (Level AA) requires content to be presentable without loss of information or functionality and without requiring scrolling in two dimensions, at a viewport of 320 CSS pixels wide for vertically scrolling content and 256 CSS pixels tall for horizontally scrolling content[1].

The 320 CSS px threshold is the width a 1280 CSS px viewport collapses to at 400% browser zoom -- it approximates the worst-case low-vision reading experience. Any fixed-pixel element wider than that (a 600 px hero image, a 480 px nav menu, a <table> with fixed columns) creates horizontal scrolling that compounds with the vertical scrolling reflowed content already requires. Two-dimensional scrolling makes it nearly impossible to track reading position when zoomed in: every line break forces a pan back to the left margin, and the next line has moved.

Why It Matters

  • Low-vision users who zoom to 400% are the primary target population. At that zoom level a desktop viewport shrinks to roughly 320 CSS px of usable width, and any element wider than the viewport forces bidirectional panning that breaks line-by-line reading[1].
  • Mobile users on narrow phones inherit the same layout. A 320 CSS px viewport is not hypothetical -- it is the small end of real devices, and a layout that reflows for low-vision desktop zoom also serves small screens without a separate codepath.
  • Users with cognitive and learning disabilities benefit from single-direction scrolling because it removes the spatial tracking load of remembering where a line started horizontally while scrolling vertically between lines.
  • 1.4.10 is mechanistically distinct from 1.4.4 Resize Text (Level AA), which requires text to scale to 200% without loss of content or functionality[2]. 1.4.4 is a text-only, 200% zoom target; 1.4.10 is a full-layout, 400% zoom target measured as a viewport width. A page can pass 1.4.4 (text scales cleanly) and still fail 1.4.10 (the layout around the text does not reflow).

Examples

Do: Responsive grid that reflows at 320 CSS px

Dashboard

View scan results and compliance status

Reports

Download accessibility audit reports

✔ Cards stack vertically at 320px -- no horizontal scroll needed

<!-- Good: auto-fit grid collapses to one column under 320px -->
<div class="card-grid">
  <div class="card">...</div>
  <div class="card">...</div>
</div>

<style>
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
</style>
Don't: Fixed-width row wider than the 320 CSS px target

Dashboard

View scan results

Reports

Download audit reports

✘ Fixed 600px row forces horizontal scrolling at 320px

<!-- Bad: width:600px overflows a 320px viewport -->
<div style="width: 600px; display: flex;">
  <div class="card">...</div>
  <div class="card">...</div>
</div>

<!-- The page now scrolls both ways. At 400% zoom the
     second card is off-screen and each reflowed line
     requires a pan back to the left margin. -->
Do: Data table restructured to stacked rows at narrow widths
Page
Homepage
Issues
12 errors, 3 warnings
Score
64/100

✔ Table data presented as stacked cards at narrow widths

<!-- Good: below 320px, row cells become block-level
     label/value pairs so the table reflows vertically -->
@media (max-width: 320px) {
  table, thead, tbody, tr, th, td {
    display: block;
  }
  td::before {
    content: attr(data-label);
    font-weight: 600;
  }
}
Don't: Wide table with fixed columns and no scroll container
PageErrorsWarningsScoreLast Scan
Homepage123642026-04-01

✘ Wide table forces horizontal scrolling -- columns hidden off-screen

How to Fix It

  1. Build layouts in relative units. Replace fixed pixel widths on containers, grids, and media with max-width plus percentage or fr units. Flexbox and CSS Grid with auto-fit/minmax() collapse to a single column under 320 CSS px without a media query.
  2. Test at a 320 by 256 CSS px viewport. Resize the browser to 320 CSS px wide (or zoom to 400% on a 1280 CSS px window) and walk the page. Every piece of content and every control must be reachable by vertical scrolling only. For any content that intentionally scrolls horizontally (a carousel, a wide code block), confirm the 256 CSS px height target[1].
  3. Contain wide content in its own scroller. The exception for two-dimensional layout applies to the specific element, not the whole page[1]. A wide data table, a schematic diagram, or a syntax-highlighted code sample can sit inside a overflow: auto wrapper so the element scrolls horizontally while the surrounding page continues to reflow. Do not set overflow-x on <body>.
  4. Cap media with max-width: 100%. Images, videos, and <iframe> embeds with intrinsic pixel dimensions overflow narrow viewports unless constrained. A single img { max-width: 100%; height: auto; } rule eliminates the most common reflow failure in content-managed pages.
  5. Watch the nav and the footer. Horizontal mega-menus and multi-column footers are the two layout regions most likely to carry fixed widths left over from a desktop-first design. Both need an explicit reflow pattern (collapsed menu, stacked footer columns) under 320 CSS px.
  6. Know what is exempt -- and what is not. WCAG exempts content that requires two-dimensional layout for use or meaning: data tables, maps, diagrams, video, games, and interfaces with persistent toolbars[1]. The exemption covers the element, not the page around it, and it does not cover layouts that are two-dimensional for visual preference rather than necessity. 1.4.10 is also distinct from 1.4.12 Text Spacing, which tests whether user-applied line-height, paragraph-spacing, letter-spacing, and word-spacing overrides break the layout -- a separate failure mode that a reflow-correct page can still trip.

References

  1. [1] W3C (2023). Understanding Success Criterion 1.4.10: Reflow. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/reflow.html ↩ ↩ ↩ ↩ ↩
  2. [2] W3C (2023). Understanding Success Criterion 1.4.4: Resize Text. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html ↩