Understanding WCAG 1.4.10
What is it?
WCAG 1.4.10 Reflow is a Level AA criterion, added in WCAG 2.1.
Content has to work in a 320 pixel wide window without forcing you to scroll in two directions at once. No dragging side to side just to read a line of text.
Where 320 comes from
320 is 1280 divided by 4.
WCAG’s reference screen is 1280 by 1024. Zoom that to 400% and you land at 320 by 256.
Pick one direction
Reflow doesn’t ban scrolling. It bans scrolling both ways at once.
Most pages scroll down, so 320 pixels wide is your number. The 256 pixel height only applies to content built to scroll sideways.
Why it matters
At 400% zoom, a page that doesn’t reflow makes you read a few words, drag right, read a few more, then drag back to find the start of the next line. Every line.
That’s low vision readers, people using magnification software, and anyone on a phone or in a narrow window.
Responsive is not the same as reflow
Responsive design is a technique. Reflow is the result you need.
A site that was never built responsive can pass, as long as nothing inside it has a locked width. And a fully responsive site can still fail.
Common failures
- One thing with a locked width. A code block, a table, an image with its size hard-coded. One item refuses to shrink, and the whole page scrolls sideways.
- The bars that never scroll away. A sticky header, cookie banner, and chat bubble each look small at full size. Together they can fill a 320 by 256 screen.
- Things land on top of each other. A layout that pins things to exact positions breaks when the space shrinks. Now a label sits over the box you type in.
- Text gets cut off instead of wrapping. A box with a locked height hides whatever doesn’t fit. The information isn’t off to the side. It’s gone.
- “Just pinch to zoom.” If reading on a phone means pinching in, then dragging back and forth across every line, that’s the failure this criterion describes.
The exceptions, and the catch
Some content genuinely needs two dimensions: maps, diagrams, data tables, video, and complex images.
Two catches. The exemption covers that one item, not the page around it. And “requires” means requires. Preferring a wider layout doesn’t qualify.
Fixed width, or maximum width
/* Fails at 320px */
width: 1200px;/* Reflows */
max-width: 1200px;
width: 100%;A fixed width says be 1200 pixels always, even in a 320 pixel window. A maximum width says never wider than 1200, but shrink when there’s less room.
Give the wide thing its own scrollbar
When a table really is too wide, let the table scroll on its own instead of pushing a scrollbar onto the whole page.
.table-wrapper {
overflow-x: auto;
}Then make that scroller reachable
If something scrolls, keyboard users have to be able to scroll it. Making it focusable does that, and the label tells a screen reader user what they’ve landed in.
tabindex="0"
role="region"
aria-label="Quarterly sales"Put those bars on a budget
Give them a maximum height that shrinks with the screen, or stop them sticking at all on narrow ones.
A header that helps at full size can be most of the screen at 320 pixels. So can a cookie banner you’ve stopped noticing.
Why there are two zoom criteria
| What | 1.4.4 Resize Text | 1.4.10 Reflow |
|---|---|---|
| Arrived in | WCAG 2.0 (2008) | WCAG 2.1 (2018) |
| Threshold | 200% | 400% |
| Scope | Text only | All content |
| Scrolling | Tolerated | Not in two directions |
You can pass one and fail the other on the same page.
How to check it
Your browser can do this. Open its developer tools, switch to device mode, and type 320 by 256 into the size boxes.
Then look for a sideways scrollbar, cut-off text, overlapping elements, and bars taking over the screen.
Closing
Setting the size is how you measure it. To feel it, zoom any page to 400% and try to read.
Most reflow failures are one item, not the whole design. A locked width, a sticky header, an image that won’t shrink. You don’t have to rebuild the site. At 320 pixels, the offender usually announces itself.
Learn more
Read the full breakdown: a20y.com/wcag-plain-english/1-4-10-reflow/
Want more clear and actionable WCAG breakdowns? Check out wcagInPlainEnglish.com