Level AA · WCAG 2.1
1.4.10 Reflow
Content reflows into a single column at 320 CSS pixels wide without a horizontal scrollbar — the equivalent of 400% zoom on a desktop screen.
Partly automated Some failures are detectable, others need judgement.
How it fails in practice
A pricing table that forces the whole page sideways on a narrow screen. A fixed-width modal that pushes its own buttons off-screen.
How to fix it
Let layouts wrap. Where a data table genuinely needs width, scroll that table in its own region rather than the whole document.
At a glance
- Level
- Level AA — the level EN 301 549 requires, and therefore the level the BFSG and the EAA are measured against.
- Principle
- Perceivable
- Guideline
- 1.4 Distinguishable
- Added in
- WCAG 2.1
- EN 301 549
- 9.1.4.10
- Automated check
- Partly automated
How to test it by hand
- Set the browser window to 1280 CSS pixels wide and zoom to 400% — that leaves the 320 pixels the criterion names. Responsive mode at 320px wide shows the same.
- Read the whole page. You should only ever have to scroll in one direction; a page that also scrolls sideways fails.
- Data tables, maps, diagrams and toolbars may scroll in two directions inside their own region — the rest of the page may not.
- Check that nothing is cut off or covers the content: sticky headers, cookie banners and chat widgets are the usual culprits at this width.
In code
.page { width: 1200px; }
.price-table { width: 960px; }.page { max-width: 1200px; width: 100%; }
.table-wrap { max-width: 100%; overflow-x: auto; }
<!-- A data table may scroll, inside its own region
that a keyboard can reach -->
<div class="table-wrap" tabindex="0" role="region" aria-label="Prices">
<table>…</table>
</div>Partly automated
How far an automated check gets
A tool finds some failures here and cannot see the rest. A clean automated result means the checks that exist found nothing — not that the criterion is met. This is the gap that makes a green scan look like an accessible site, and it is where the keyboard agent, the agents still in development and a human reviewer do the remaining work.
We lay every page out again at 320px wide and compare it with the wide layout: sideways scrolling, text cut off or running into other text, and content that disappears. That catches the common failures, not every one, so a clean result is not a pass.
Where it matters most
The guides that list it among the criteria to check first.
- BFSG for ticketing and passenger transport
- BFSG for e-books and reading apps
- BFSG for telecommunications services
Related criteria
Other criteria under the same guideline.
Further reading
-
Reflow
Content stays usable at 320 CSS pixels wide – 400% zoom at 1280 pixels – without scrolling in two directions (WCAG 1.4.10, Level AA).
Find out which criteria your site fails
We scan up to 100 pages against WCAG 2.2 AA, send the keyboard agent through the page you name and email you the report — free, once, no strings.