Tutorial
Reflow: no page may scroll in two directions
1 min read
In short
1.4.10 requires content to stay readable at 320 CSS pixels wide without scrolling in two directions. This is not only about phones: zooming a desktop window to 400 percent produces the same viewport. The causes are fixed pixel widths, rigid grids and text that is not allowed to wrap. The only exceptions are contents that genuinely need two-dimensional layout, such as large tables or maps.
At a glance
Check at 320 px
Set the browser viewport to 320 CSS pixels wide, or zoom to 400 percent.
Find the culprit
Look for fixed width values, rigid grids and white-space: nowrap.
Let it wrap
max-width instead of width, auto-fit grids, overflow-wrap for long words.
Do not block zoom
Remove maximum-scale and user-scalable=no from the viewport meta tag.
1.4.10 sounds like a mobile criterion but is mostly a zoom criterion: 320 CSS pixels is what a normal desktop window becomes at 400 percent magnification. Anyone who has to zoom that far to read at all ends up in exactly this width. If the page then runs sideways, reading means scrolling every line back and forth.
The three usual causes
/* 1. Feste Breiten zwingen zum Querscrollen */
.container { width: 1200px; }
.table-wrap { min-width: 900px; }
/* 2. Pixelgenaues Raster, das nicht umbrechen kann */
.grid { display: grid; grid-template-columns: 320px 320px 320px; }
/* 3. Text, der nicht umbrechen darf */
.product-title { white-space: nowrap; }<!-- Zoom abgeschaltet: verletzt 1.4.4 direkt,
denn Vergroessern ist gar nicht erst moeglich -->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">The viewport meta tag strictly belongs to 1.4.4 (Resize Text), but it almost always travels with reflow problems: switching zoom off does not merely break the adaptation, it forbids it.
The fix
/* 1. Obergrenze statt fester Breite */
.container { width: 100%; max-width: 75rem; margin-inline: auto; }
/* 2. Raster, das von selbst umbricht */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
gap: 1rem;
}
/* 3. Lange Woerter brechen, statt die Seite zu verbreitern */
.product-title { overflow-wrap: anywhere; }
/* 4. Tabellen sind die Ausnahme in 1.4.10: sie duerfen scrollen,
aber nur in ihrem eigenen Container, nie die ganze Seite */
.table-wrap { overflow-x: auto; }<!-- Zoom erlauben: kein maximum-scale, kein user-scalable=no -->
<meta name="viewport" content="width=device-width, initial-scale=1">Frequently overlooked
- Sticky headers and footers eat half the height at high zoom. Make them static on small viewports.
- One over-wide element (an image, an iframe, a pre block) widens the whole page. max-width: 100% fixes most of them.
- Text spacing (1.4.12) has to survive too: line height 1.5 and wider word spacing must not clip anything.
- Test with real content, not short sample text: long product names are the hard case.
Testing
- Open DevTools and set the responsive view to 320 by 640.
- Walk the page top to bottom: is there a horizontal scrollbar anywhere?
- Zoom to 400 percent and check the same thing in a normal window.
Related WCAG criteria
Frequently asked questions
- Does 1.4.10 apply to tables?
- A large data table may scroll horizontally as an exception, because it needs two-dimensional structure. It has to do that inside its own scrollable container, so the rest of the page stays readable without horizontal scrolling.
- Why 320 pixels?
- It corresponds to 1280 CSS pixels at 400 percent zoom, meaning a normal desktop window for people who have to magnify heavily. It happens to cover small phones as well.
- Is a separate mobile layout enough?
- Only if it offers the same content and the same functions. A stripped-down mobile version that drops functionality does not solve the problem, it relocates it.
Request a free scan
Tell us your domain - we run a free initial scan and show you the most important barriers.