Short answer: WCAG reflow, success criterion 1.4.10, asks that your content fit a window 320 CSS pixels wide without scrolling sideways. That is what a 1,280-pixel window shows at 400% zoom. Content that needs two dimensions, like data tables, maps and video, is exempt.
What the reflow criterion asks
The W3C’s text asks that content can be shown without losing information or functions, and without scrolling in two dimensions. Content that scrolls down the page has to work at a width of 320 CSS pixels.
For languages written vertically, which scroll sideways, the measure is a height of 256 CSS pixels. Parts that need a two-dimensional layout to be used or understood are exempt.
A note in the criterion explains the numbers: 320 CSS pixels equal a window that starts 1,280 pixels wide, zoomed to 400%. Reflow is level AA and part of WCAG 2.2, which our WCAG 2.2 guide covers.
Why 320 pixels
The W3C explains that when lines run past the edge of the window, people have to scroll back and forth for every line. They lose their place, and reading takes much more effort.
It chose 320 CSS pixels as a reasonable minimum that authors can reach, and it matched small phone screens when the criterion was written. It also notes that 400% applies to the width and the height, not to the area.
So the same layout serves phones and zoomed desktops. Our responsive web design guide covers how that layout is built.
What may scroll sideways
| Content | At 320 CSS pixels | Why |
|---|---|---|
| Paragraphs, headings and lists | Wrap inside the window | Lines past the edge make people scroll back and forth |
| Columns and sidebars | Stack into one column, or narrower ones that fit | Moving content is fine while people can reach it |
| Data tables | May scroll in their own box; each cell must fit | Rows and columns carry the meaning |
| Maps, diagrams and video | May keep their shape | Cut into pieces, they would be hard to understand |
| Carousels | May move sideways if each panel fits | Each panel is read in one direction |
| Toolbars of editing tools | May stay in view | People need the content and its tools together |
From the W3C’s Understanding page for success criterion 1.4.10, read November 5, 2026.
The exception covers only that part of the page. If a table needs its own scrollbars, the paragraphs around it still have to fit the window.
The W3C’s answer is a box for the table with its own scrollbars, so the page itself doesn’t scroll sideways. In CSS, overflow-x: auto on that box shows a scrollbar only when the table doesn’t fit, as MDN explains. For video, max-width: 100% keeps the player inside the window.
Nothing may disappear
Hiding something at 320 pixels is a failure unless people can still reach it. The W3C’s failure F102 describes content shown on a wide screen that vanishes after reflow.
Its examples include sidebar links that vanish, labels replaced by placeholder text, and a search field that goes with no icon or menu to bring it back.
Moving content is allowed. A menu can sit behind a button and a column can drop below another, as long as everything stays within reach.
Let people zoom
web.dev recommends the viewport meta tag with width=device-width and initial-scale=1, so the page fits the screen. It warns against maximum-scale=1 and user-scalable=no, which stop people from zooming.
MDN adds that blocking zoom keeps people with low vision from reading the page. It notes that WCAG requires at least 2× scaling and calls 5× the best practice.
Our mobile-friendly test guide shows where to check that the viewport tag doesn’t block zooming. web.dev also points out that text sized in em or rem follows the reader’s settings, while pixel sizes may not.
How to make a page reflow
- Keep the viewport meta tag with width=device-width and initial-scale=1.
- Never set maximum-scale=1 or user-scalable=no.
- Build layouts with flexbox or grid, so blocks wrap when space runs out.
- Let columns stack at narrow widths, in the same order as the code.
- Give images and video max-width: 100%.
- Put wide tables in a box of their own with overflow-x: auto.
- Test at 1,280 pixels and 400% zoom, and check that nothing went missing.
The W3C’s techniques C31 and C32 show flexbox and grid layouts that reflow. Both warn that reordering blocks with CSS can break the keyboard order.
How to test reflow
The W3C’s test starts with the page at a desktop width such as 1,280 pixels. Then zoom to 400%, or narrow the window to 320 pixels.
Read the page from top to bottom. No text should need sideways scrolling. Everything you saw at full width should still be there, or reachable through a menu, a button or a link.
Your window may come out a little narrower. The W3C zoomed a 1,280 by 1,024 laptop screen to 400% and got a window 318 pixels wide, because of the scrollbar.
Our pages at 320 pixels
On November 5, 2026, we opened six of our pages in a window 320 CSS pixels wide, the width of a 1,280-pixel window at 400% zoom: the home page, our web design page and a guide, in both languages.
None of them scrolled sideways. Each page measured exactly 320 pixels across, so there was nothing to scroll to.
The blocks that sit side by side at 1,280 pixels stacked up. On the guide, every row of blocks became a single column. On the web design page, rows of two to four blocks became one column, or two narrow ones that still fit.
The guide’s table changed the most. At 1,280 pixels it has three columns. At 320, each row turned into a block with its cells one under the other, so the table needs no scrollbar of its own.
Before you publish
- At 320 CSS pixels, no text needs sideways scrolling.
- Columns and sidebars stack or shrink to fit.
- Nothing from the wide layout went missing.
- Tables, maps and video scroll in their own box, if at all.
- The viewport tag doesn’t block zooming.
- Text sizes use em or rem.
RememberAt 400% zoom, a wide screen becomes a narrow one. If your page works at 320 pixels wide, it works for people who zoom in to read.
Our web design service builds layouts that stack into one column on narrow screens, like the pages above.
Quick answers about WCAG reflow
What is the difference between reflow and resize text?
Resize text, criterion 1.4.4, asks that text can grow to 200%. Reflow, criterion 1.4.10, asks that content fit 320 CSS pixels without scrolling in two directions. The W3C says text should reach 200% while the page still meets reflow.
Is sideways scrolling ever allowed?
Yes, for parts that need two dimensions: data tables, maps, diagrams, video, games, presentations and toolbars that must stay in view. A carousel can scroll sideways too, as long as each panel fits in 320 pixels.
Do data tables fail reflow?
No. Data tables are an exception, but each cell still has to reflow, and the heading, search field or pagination around the table has to fit the window. The W3C shows the table in a scrolling box of its own.
Is 320 pixels a phone width?
It was chosen as a reasonable minimum, and it matched small phone screens when the criterion was written. On a desktop, it is what a 1,280-pixel window shows at 400% zoom.
Is hiding content at small widths a failure?
Only if people can’t get to it. The W3C’s failure F102 covers content that disappears at 320 pixels. Moving it lower on the page, or behind a menu, a button or a link, is fine while it stays within reach.
Sources
Read on November 5, 2026. W3C Web Accessibility Initiative: Understanding Success Criterion 1.4.10: Reflow, techniques C32: Using media queries and grid CSS to reflow columns and C31: Using CSS Flexbox to reflow content, and failure F102. web.dev: Accessible responsive design. MDN Web Docs: <meta name="viewport"> and overflow-x. Our case: our own pages, read in a browser on November 5, 2026.