1.4.10 Reflow

Level: AA | Principle: Perceivable | Since: WCAG 2.1 | Automation: Manual

What This Means

Content must reflow to fit within a viewport width of 320 CSS pixels without requiring horizontal scrolling. This is equivalent to a desktop browser zoomed to 400%. Users who need large text should not have to scroll in two directions to read content.

The exception is content that requires two-dimensional layout for usage or meaning, such as data tables, maps, diagrams, toolbars, and video.

Who This Affects

Users with low vision — rely on browser zoom or magnification, often at 200-400%
Users on mobile devices — small screens are effectively the same as a zoomed desktop
Users with cognitive disabilities — horizontal scrolling disrupts reading flow and comprehension

Common Pitfalls

1. Fixed-width layouts

/* Bad: forces horizontal scroll at small widths */
.container {
  width: 1200px;
}

/* Good: responsive container */
.container {
  max-width: 1200px;
  width: 100%;
}

2. Overflow hidden clipping content

/* Bad: content gets cut off */
.card {
  width: 400px;
  overflow: hidden;
}

/* Good: let content reflow */
.card {
  max-width: 100%;
  overflow-wrap: break-word;
}

3. Absolute positioning that overlaps at narrow widths

<!-- Bad: elements overlap when viewport narrows -->
<div style="position: absolute; left: 600px;">Sidebar</div>

<!-- Good: use responsive layout -->
<div style="display: flex; flex-wrap: wrap;">
  <main>Content</main>
  <aside>Sidebar</aside>
</div>

How to Fix

Use responsive design patterns

/* Good: mobile-first responsive layout */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

Use relative units

/* Good: text and spacing scale with zoom */
body {
  font-size: 1rem;
  padding: 1em;
  max-width: 70ch;
}

How to Test

Set the browser window to 1280px wide and zoom to 400% (effective viewport width becomes 320px). Alternatively, resize the browser to 320px wide at 100% zoom.
Scroll through every section of the page and verify no horizontal scrollbar appears for regular content (data tables, maps, and toolbars are exempt).
Check that all text reflows into a single column and remains readable without side-scrolling.
Verify all interactive elements (buttons, links, form fields, menus) remain accessible and functional.
Check that no content is clipped, hidden behind other elements, or overlapping.
Pass: All content reflows to a single column at 320px width with no horizontal scrolling, and all functionality is preserved.
Fail: A horizontal scrollbar appears for regular content, text or controls are cut off, or elements overlap at 320px viewport width.

axe-core Rules

No automated axe-core rules. This criterion requires manual testing.