Skip to main content
Perceivable WCAG 1.4.10

1.4.10 Reflow

Content can be presented without loss of information or functionality and without requiring scrolling in two dimensions at 320 CSS pixels wide or 256 CSS pixels tall.

Level AA Serious WCAG 2.1 (new) WCAG 2.2

What This Rule Means

WCAG 1.4.10 requires that content reflows to fit within a single dimension of scrolling when the viewport is narrowed to 320 CSS pixels wide (equivalent to a 1280px desktop viewport at 400% zoom). For vertical-scrolling content, horizontal scrolling must not be necessary. For horizontal-scrolling content (such as data tables or certain apps), vertical scrolling must not be necessary at 256 CSS pixels tall.

This criterion directly connects zoom accessibility to responsive design. When a user zooms a desktop browser to 400%, the effective viewport width becomes 320 CSS pixels — identical to a narrow mobile viewport. If the site works well at mobile widths without horizontal scrolling, it likely meets this criterion. The key is that content must adapt, reflow, and reorganize itself rather than simply scaling up and overflowing.

Exceptions exist for content where two-dimensional layout is essential for usage or meaning, such as data tables, toolbars, maps, diagrams, and some media players. These elements may require two-dimensional scrolling, but surrounding content must still reflow.

Why It Matters

This criterion is essential for low-vision users who zoom their browsers significantly. Without reflow, zooming to 400% creates a tiny viewing window into a massive page, requiring constant horizontal scrolling to read every line. This makes reading content extremely laborious — the user must scroll right to finish each line, then scroll left and down to start the next line. Reflow eliminates this by stacking content vertically.

Reflow also benefits mobile users, users with motor impairments who find two-directional scrolling difficult, and anyone using narrow browser windows. It represents the convergence of responsive design best practices and accessibility requirements.

In accessibility audits, 1.4.10 failures are among the most commonly found AA-level issues alongside 1.4.3 contrast. Many sites that appear mobile-friendly still break at true 320px-wide viewports because they target common device widths (375px, 390px) rather than the WCAG-required 320px.

Related axe-core Rules

There are no automated axe-core rules specifically for 1.4.10 Reflow. This criterion requires manual testing at specific viewport sizes because automated tools cannot reliably determine whether content loss or horizontal scrolling issues are present. However, related rules like meta-viewport contribute to reflow support.

How to Test

  1. In Chrome DevTools, open the Device toolbar (Ctrl+Shift+M / Cmd+Shift+M) and set a custom viewport of 320px wide with no height restriction.
  2. Alternatively, zoom the desktop browser to 400% (1280px / 4 = 320px effective width).
  3. Scroll through the entire page vertically. No horizontal scrollbar should appear and no content should be hidden off-screen to the right.
  4. Verify that all interactive elements are usable: buttons are tappable, form fields are accessible, navigation works.
  5. Check that no text is clipped, truncated, or overlapping other content.
  6. Test both orientations if the content has a horizontal layout variant.
  7. For data tables, verify they either convert to a stacked layout, use a horizontally scrollable container (while surrounding content reflows), or provide a responsive alternative view.
  8. Test key user flows: navigation, search, forms, checkout — ensure every step works at 320px wide.

How to Fix

Build with a mobile-first responsive approach. Design for 320px minimum width from the start:

/* Mobile-first base styles (320px minimum) */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Stack grid items on narrow viewports */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

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

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

Handle navigation responsively — collapse to a mobile menu at narrow widths:

<nav aria-label="Main navigation">
  <button
    class="menu-toggle"
    aria-expanded="false"
    aria-controls="nav-menu"
  >
    <span class="sr-only">Menu</span>
    <svg aria-hidden="true"><!-- hamburger icon --></svg>
  </button>
  <ul id="nav-menu" class="nav-list" role="list">
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
/* Navigation reflow */
.nav-list {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
}

.nav-list[aria-expanded="true"],
.menu-toggle[aria-expanded="true"] + .nav-list {
  display: flex;
}

.menu-toggle {
  display: block;
}

@media (min-width: 768px) {
  .nav-list {
    display: flex;
    flex-direction: row;
    position: static;
  }
  .menu-toggle {
    display: none;
  }
}

Handle data tables with responsive patterns:

/* Responsive table: horizontal scroll within a container */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Alternative: stacked layout for simple tables */
@media (max-width: 640px) {
  .responsive-table thead {
    display: none;
  }
  .responsive-table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.5rem;
  }
  .responsive-table td {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
  }
  .responsive-table td::before {
    content: attr(data-label);
    font-weight: 700;
    margin-right: 1rem;
  }
}

Avoid fixed-width elements that prevent reflow:

/* Avoid fixed widths */
.sidebar {
  /* Bad: width: 300px; — prevents reflow */
  /* Good: responsive approach */
  width: 100%;
}

@media (min-width: 768px) {
  .layout {
    display: grid;
    grid-template-columns: 1fr 300px;
  }
}

/* Use max-width instead of width for images */
img {
  max-width: 100%;
  height: auto;
}

/* Prevent horizontal overflow from code blocks */
pre, code {
  overflow-x: auto;
  max-width: 100%;
  word-wrap: break-word;
}

Common Mistakes

  • Fixed-width layouts or containers that do not adapt below 375px, causing horizontal scroll at 320px.
  • Navigation bars that do not collapse to a hamburger menu, overflowing horizontally on narrow viewports.
  • Hero sections with fixed pixel dimensions and absolutely positioned text that overlaps at narrow widths.
  • Images without max-width: 100% that extend beyond the viewport.
  • CSS that uses vw units for font sizes or widths without a minimum bound, causing content to become unreadable.
  • Sticky headers or footers with fixed heights that consume excessive viewport space at 400% zoom.
  • Two-column forms that do not stack to single-column at narrow widths.
  • Horizontal carousels or sliders that are the sole means of accessing content (content must be accessible without the carousel pattern at narrow widths).

Resources