WCAG 1.4.10 Reflow

Success criterion 1.4.10 helps people with low vision who zoom the page a lot. When content reflows into one column, they only scroll in one direction; when it does not, they have to scroll left and right on every line. It was added in WCAG 2.1, is level AA and part of EN 301 549 (clause 9.1.4.10).

What the criterion requires

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions, for:

• vertical scrolling content (normal web pages) at a width equivalent to 320 CSS pixels;
• horizontal scrolling content at a height equivalent to 256 CSS pixels.

320 CSS px is what a desktop browser window 1280 CSS px wide shows at 400 % zoom; 256 CSS px corresponds to a 1024 px high window at 400 %.

Exception: parts of the content that require a two-dimensional layout for usage or meaning. WCAG names images such as maps and diagrams, video, games, presentations, data tables (not their individual cells) and interfaces where toolbars must stay in view while working on content. Only those parts may scroll both ways.

Typical failures on an online shop

• a page wider than the screen at 320 px because of a fixed-width banner, iframe or table of product variants;
• the main menu or filters that disappear at high zoom with no other way to reach them;
• a sticky header and cookie bar that cover most of a small viewport;
• long product names, SKUs or URLs that do not wrap and push the layout sideways;
• a checkout with two columns that cannot fit and require horizontal scrolling.

How to check it

Automated: no automated rule in our checker maps to this criterion. Reflow depends on layout at a specific zoom level and on whether anything is lost, which a rule cannot judge. This needs a manual check.

By hand: set a desktop browser window to 1280 px width and zoom to 400 %, or use device emulation at 320 × 256 px for horizontal content. Go through home, category, product, cart and checkout. Check that you never scroll sideways to read text, that all content and menus are still there and that nothing overlaps.

How to fix it

• Use a responsive layout with flexible widths (percentage widths, max-width, minmax() in grid) instead of fixed pixel widths.
• Let long words and URLs wrap (overflow-wrap: anywhere).
• Put wide data tables in a container that scrolls on its own, and keep the rest of the page reflowing.
• Make embedded videos and iframes responsive.
• Keep sticky headers small, or unstick them at narrow widths.

Related criteria

• 1.4.4 Resize Text — text at 200 % zoom.
• 1.4.12 Text Spacing — larger spacing without loss.
• 1.3.4 Orientation — portrait and landscape.

Frequently asked questions

How do I test WCAG reflow?

Open the page in a desktop browser window 1280 CSS px wide and zoom to 400 %, or set the viewport to 320 px wide in developer tools. Scroll down through the page and complete key tasks: you should never need to scroll sideways to read text or reach a control.

Are data tables allowed to scroll horizontally?

Yes. Content that needs a two-dimensional layout for its meaning or use — data tables, maps, diagrams, video, games, toolbars that must stay in view — may scroll in two directions. The rest of the page must still reflow.

Is a responsive theme enough for 1.4.10?

Usually it is a good start, but test anyway. Fixed-width elements, wide embeds, long words or URLs and sticky headers often break reflow even on responsive themes.

What is the difference between 1.4.4 and 1.4.10?

1.4.4 Resize Text asks that text works at 200 % zoom. 1.4.10 Reflow asks that at 400 % (320 px width) content fits without horizontal scrolling.