WCAG 1.4.10 Reflow: No Horizontal Scrolling at 320px Width

Last updated: 2026-03-22

Level AA Perceivable WCAG 1.4.10

What This Criterion Requires

WCAG 1.4.10 requires that content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions, at a width equivalent to 320 CSS pixels for vertically scrolling content, or a height equivalent to 256 CSS pixels for horizontally scrolling content. This is equivalent to the browser viewport at 1280 pixels wide zoomed to 400%. This criterion was added in WCAG 2.1 to address the needs of low-vision users who zoom significantly into content. Content must reflow into a single column at narrow widths rather than requiring horizontal scrolling. Exceptions exist for content whose usage or meaning would be lost with reflow, such as data tables, complex diagrams, toolbars with many controls, and maps. These exceptions should still provide some means of accessing all content, even if two-dimensional scrolling is necessary. Meeting this criterion effectively requires responsive design techniques including CSS flexbox, CSS grid, relative units, and media queries to create layouts that adapt fluidly to narrow viewports.

Why It Matters

Users with low vision frequently zoom their browser to 300-400% to be able to read text. At this zoom level, if the page does not reflow, these users must scroll horizontally back and forth on every line of text, which is extremely fatiguing and makes content nearly impossible to read. Horizontal scrolling while reading creates a severe cognitive load because the user must track their reading position across two axes simultaneously. This criterion also benefits users on mobile devices with small screens, users who use split-screen modes, and users who have browser windows at narrow widths for other reasons. Without proper reflow, content can also be lost entirely when it overflows off screen in a container with overflow:hidden. Responsive design is the industry standard approach and benefits all users across all device sizes, making this criterion both an accessibility requirement and a general best practice for modern web development.

Common Failures and How to Fix Them

Fixed-width layout causes horizontal scrolling

The page uses fixed pixel widths for its main layout containers, causing horizontal scrolling at narrow viewport widths or when zoomed to 400%.

Inaccessible 
<style>
.page-wrapper {
  width: 1200px;
  margin: 0 auto;
}
.sidebar {
  width: 300px;
  float: left;
}
.main-content {
  width: 900px;
  float: left;
}
</style>
Accessible 
<style>
.page-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 768px) {
  .layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 2rem;
  }
}
/* At narrow widths, stacks to single column automatically */
</style>

Content overflows at 320px viewport width

Elements with minimum widths larger than 320px or with nowrap styling cause content to overflow the viewport, requiring horizontal scrolling.

Inaccessible 
<style>
.pricing-table {
  display: flex;
  gap: 20px;
  white-space: nowrap;
}
.pricing-card {
  min-width: 350px;
  flex-shrink: 0;
}
</style>
Accessible 
<style>
.pricing-table {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.pricing-card {
  flex: 1 1 280px;
  min-width: 0;
}
@media (max-width: 320px) {
  .pricing-card {
    flex-basis: 100%;
  }
}
</style>

How to Test

  1. Set the browser viewport to 1280px wide and zoom to 400%, which is equivalent to a 320 CSS pixel viewport. Alternatively, use DevTools to set the viewport directly to 320px wide.
  2. Verify that all content is viewable by scrolling vertically only, with no horizontal scrollbar present.
  3. Check that no text, images, or interactive controls are clipped, overlapping, or hidden at this narrow width.
  4. Confirm that navigation menus adapt to the narrow viewport (e.g., a hamburger menu) and remain fully functional.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Further Reading

Related WCAG Criteria