1.4.10 Reflow

What does it mean?

When someone zooms a desktop browser to 400% at 1280 px width, the page behaves like a 320 CSS px wide screen. At that size, content must fit into one column so that users only scroll vertically. For content that scrolls horizontally, such as vertical text, the equivalent is a height of 256 CSS px.

Exceptions are parts of content that need a two-dimensional layout to make sense, such as maps, diagrams, video, games, presentations, data tables and interfaces with toolbars that must remain visible. A wide data table may scroll on its own, but the rest of the page must still reflow.

Who does it help?

• People with low vision who zoom to large sizes
• People using small screens
• People who would otherwise lose their place when scrolling sideways

Common failures

• A fixed-width layout (for example width: 1200px) that causes horizontal scrolling
• Text in containers with fixed widths that overflows the screen
• Sticky headers or cookie banners that cover most of the screen at 400% zoom
• Content or functions hidden at narrow widths with no other way to reach them

How we test it

• evidence Evidence: our scanner collects material such as screenshots, lists and measurements.

Test question: At 320 CSS px width: no horizontal scrolling, nothing cut off (see screenshot and overflow measurement).

A person decides every criterion. No criterion ever passes automatically.

How to fix it

.wrapper { width: 1200px; }
.columns { display: flex; }

.wrapper { max-width: 75rem; margin-inline: auto; padding-inline: 1rem; }
.columns { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.columns > * { flex: 1 1 18rem; }
img { max-width: 100%; height: auto; }

The layout uses flexible widths and wraps columns, so it fits a 320 px viewport without horizontal scrolling.

Practical tips

• Test with browser zoom at 400% in a 1280 px wide window.
• Wrap wide tables in a container with overflow-x: auto so only the table scrolls.

Guides and patterns on this

• Cookie banners that lock no one outThe cookie banner is often the first thing visitors meet, and for some the last: if it cannot be used with a keyboard or screen reader, the site is closed to them. Here is how to get it right.

Official source

Understanding WCAG 2.2 at the W3C: 1.4.10 Reflow