WCAG 2.1 · Level AA · Perceivable
WCAG 1.4.10 — Reflow, explained with examples
Content must reflow to a 320 CSS pixel width (the equivalent of 400% zoom on a 1280px viewport) without requiring horizontal scrolling for the primary reading direction. Users zoom in heavily and small-screen users need content to wrap. Fixed widths fail this regularly.
- Number
- 1.4.10
- Level
- AA
- Principle
- Perceivable
- Guideline
- 1.4 Distinguishable
Why this criterion exists
Users zoom in heavily and small-screen users need content to wrap. Fixed widths fail this regularly.
If you only remember one thing: content must reflow to a 320 css pixel width (the equivalent of 400% zoom on a 1280px viewport) without requiring horizontal scrolling for the primary reading direction. Everything else on this page is detail.
Who feels it when this fails
Accessibility criteria sometimes feel abstract until you see who pays the cost when a site ignores them. Reflow affects:
Low-vision users
Mobile users
How sites typically fail it
These are the patterns we see week after week. None are intentional — they are accidents of how teams build interfaces under deadline. Knowing the failure modes is the fastest path to writing them out of your component library.
Tables and code blocks creating horizontal scroll on mobile
How to test for it
Resize the browser to 320px wide; no horizontal scroll allowed.
Automated scanners catch this criterion most of the time, but never all of the time. Manual testing with the keyboard and a screen reader closes the gap.
A code fix you can copy
Constrain the scroll to the data table, not the page.
The problem
.table { min-width: 800px; }The fix
@media (max-width: 600px) {
.table { display: block; overflow-x: auto; }
}Constrain the scroll to the data table, not the page.
Other Perceivable criteria
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.