WCAG 10.11 — Can content on every page be displayed without loss of information or functionality and without requiring scrolling in two dimensions?

Content overflowing on mobile (reflow 320px)

The issue

WCAG success criterion 1.4.10 (Reflow) requires that the content of a web page can be displayed at a width of 320 CSS pixels without requiring horizontal scrolling. This 320px width corresponds to a 1280px screen with 400% browser zoom, which is the use case for visually impaired people using strong magnification. When a site forces horizontal scrolling at this width, the user must scroll simultaneously horizontally and vertically to read the content — an extremely tedious operation that turns reading into a navigation exercise. The main causes of this problem are fixed pixel widths (width: 1200px), wide data tables that do not adapt, images without max-width: 100%, elements with min-width set too high, and inflexible layouts that do not switch to a single column on small screens. Pre-formatted blocks (pre tag) and code blocks are also sensitive points because their content cannot be broken without losing meaning. The problem is often worsened by the use of absolute sizes throughout the CSS. A 1000px-wide container physically cannot fit in 320px. The solution relies on responsive design: using percentage or relative-unit widths, fluid images (max-width: 100%), media queries to reorganize layout, and flexbox or CSS Grid with adaptive columns. Wide data tables can be made responsive with localized horizontal scrolling (overflow-x: auto on the table container only) or by transforming rows into stacked cards on mobile.

Does your site have this issue?

106 RGAA criteria analyzed in 5 minutes by our AI.

Test your site for free

Impact on users

Visually impaired people who use 400% zoom in their browser effectively see the site in a 320px-wide viewport. If content overflows, they must navigate in two directions to read each line of text: go right to read the end of the line, go back left to find the beginning of the next line, and so on. This is an exhausting exercise that makes reading a simple article extremely tedious. On mobile, the same problem occurs for all users if the site is not responsive. Content that exceeds the screen creates a horizontal scrollbar and a degraded navigation experience. Screen reader users on mobile are also affected: swipe gestures for content navigation become unpredictable when content overflows in two dimensions. Non-conformity with the reflow criterion is a strong indicator of a site that was not designed with a responsive, mobile-first approach.

Code example

Before (non-compliant)
<style>
  .container {
    width: 1200px;
    margin: 0 auto;
  }
  .two-columns {
    display: flex;
    gap: 40px;
  }
  .column {
    width: 580px;
  }
  img {
    width: 800px;
  }
  table {
    width: 1000px;
  }
</style>
After (compliant)
<style>
  .container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
  }
  .two-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
  }
  .column {
    flex: 1 1 280px; /* flexible width, min 280px */
  }
  img {
    max-width: 100%;
    height: auto;
  }
  .table-wrapper {
    overflow-x: auto; /* localized horizontal scroll */
  }
  table {
    min-width: 600px; /* table scrolls within its container */
  }
</style>

Frequently Asked Questions

How do I test reflow at 320px?
Method 1: Zoom your browser to 400% on a 1280px-wide screen. Method 2: Open Chrome DevTools, enable responsive mode, and set the width to 320px. Verify that no content requires horizontal scrolling (exceptions: data tables, maps, diagrams).
Are data tables exempt from the reflow criterion?
Yes, partially. WCAG accepts that data tables may require horizontal scrolling because their two-dimensional structure is essential to understanding. However, scrolling must be localized (the table scrolls within its container, not the entire page) and the table must remain functional. Wrap the table in a div with overflow-x: auto.
Is max-width: 100% on images sufficient?
It is a good start. Also add height: auto to maintain the image's aspect ratio. For CSS background images, use background-size: contain or cover. For inline SVGs, add a viewBox and remove fixed width/height attributes. Test with images of all sizes to verify none exceed their container.
What about code blocks (pre) that are too wide?
Long code blocks are an accepted exception by WCAG (content that requires two-dimensional scrolling to be understood). Wrap the pre block in a container with overflow-x: auto so it scrolls horizontally in its own space without affecting the entire page. Add white-space: pre-wrap if automatic line wrapping is acceptable.

Does your site have this issue?

Scrutia audits your site against WCAG 2.1 AA criteria in 5 minutes. Keyboard navigation, ARIA components, visible focus, contrasts, and much more.

Run a free audit