1.4.10 Reflow

1. What is the goal of this criterion?

Mobile devices are everywhere today. But what happens when people need to zoom a website to 400% just to make anything out? Or when the browser only takes up half the screen because someone is working on something else at the same time?

The goal of Success Criterion 1.4.10 is clear: content should adapt to narrow viewing areas without information disappearing or becoming unusable. Concretely, websites must still work in very narrow viewports – without users having to scroll in two directions to read a line of text.

2. What exactly does it require?

The criterion requires that content can be presented without loss of information or functionality and without scrolling in two dimensions:

For vertically scrolling content: at a width of 320 CSS pixels. That’s equivalent to a window 1280 CSS pixels wide at 400% zoom.

For horizontally scrolling content (such as vertical text): at a height of 256 CSS pixels. That’s equivalent to a window 1024 CSS pixels high at 400% zoom.

Exempt are parts that need a two-dimensional layout for usage or meaning, for example:

• Images required for understanding, such as maps and diagrams
• Videos and games
• Presentations
• Data tables (but not the content of individual cells)
• Interfaces where toolbars must stay in view while editing content

Two-dimensional scrolling is fine for these parts – the rest of the page still has to reflow.

A practical example: a news website normally shows its article teasers in three columns. In a narrow viewport the teasers stack on top of each other – all information remains available; only the arrangement changes.

3. Why does it matter for accessibility?

Imagine you have to use a website at 400% zoom to read the text – but every line runs off the right edge of the screen. You’d have to scroll back and forth for every single sentence.

Reflowing content makes websites accessible because it:

• Lets people with low vision enlarge content heavily without losing readability
• Helps in mobile situations when only a narrow screen is available
• Spares people with motor impairments the tiring back-and-forth scrolling
• Reduces cognitive load because the reading direction stays the same
• Makes orientation on the page easier, even at high magnification

And incidentally: responsive design is standard today – 1.4.10 makes sure that flexibility also works at high zoom levels. Resize Text lays the groundwork at 200%.

4. How to meet the criterion

The good news: modern responsive websites often meet many of the requirements already. But at high zoom levels, the real challenges show up.

Basic techniques:

Use media queries: define breakpoints for narrow viewports and adapt the layout accordingly. Your layout must still work at a width of 320 CSS pixels.

Flexbox and CSS Grid: these layout methods help content wrap and rearrange automatically.

Use relative units: em, rem and % instead of fixed pixel widths – so the layout adapts.

Tame fixed elements: headers, footers or sidebars that “stick” on large screens should scroll normally in narrow viewports. Otherwise there’s hardly any room left for content at high zoom – and they can hide the focus (see Focus Not Obscured (Minimum)).

Collapse navigation: in narrow viewports, gather extensive navigation behind a menu button that works with the keyboard.

Avoid typical pitfalls:

• Put data tables in their own horizontally scrollable containers (overflow-x: auto) so they don’t break the page width
• Limit images and videos with max-width: 100%
• Let long URLs or words wrap, for example with overflow-wrap: anywhere
• Replace fixed-width containers with flexible alternatives

Testing tip: set your browser window to 1280 CSS pixels wide, zoom to 400% and check whether all content stays readable without horizontal scrolling and all functions remain available. Alternatively, simulate a viewport 320 CSS pixels wide in your developer tools.

5. Why this criterion matters for businesses

Reflowing layouts aren’t just an accessibility requirement – they’re a real advantage in a mobile world.

1. Reach a wider audience

According to the WHO, around 1.3 billion people worldwide live with a significant disability, many of them with vision impairments. Add everyone whose vision is temporarily limited: phone users in bright sunlight, older people, people recovering from eye surgery. A layout that reflows makes your content accessible to them.

2. Improve the mobile experience

With 1.4.10 you ensure your website works not only on smartphones but also in split-screen mode, in narrow windows and at high zoom levels.

3. Future-proof your website

New device formats appear all the time: foldable phones, small tablets, unusual aspect ratios. Flexible layouts adapt – without a redesign for every new device.

Last but not least: legal requirements. The European Accessibility Act (Directive (EU) 2019/882) has applied since 28 June 2025 to many consumer products and services, such as online shops; in Germany it is implemented by the Barrierefreiheitsstärkungsgesetz (BFSG). The technical benchmark is the harmonised standard EN 301 549, which references WCAG 2.1 Level AA for web content – and 1.4.10 is part of that. Public sector bodies are covered by the Web Accessibility Directive (EU) 2016/2102. This section is general information, not legal advice.

6. The success criterion in the W3C’s words

Success Criterion 1.4.10 Reflow (Level AA)

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

• Vertical scrolling content at a width equivalent to 320 CSS pixels;
• Horizontal scrolling content at a height equivalent to 256 CSS pixels.

Except for parts of the content which require two-dimensional layout for usage or meaning.

Note 1: 320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which is designed to scroll horizontally (e.g., with vertical text), 256 CSS pixels is equivalent to a starting viewport height of 1024 CSS pixels at 400% zoom.

Note 2: Examples of content which requires two-dimensional layout are images required for understanding (such as maps and diagrams), video, games, presentations, data tables (not individual cells), and interfaces where it is necessary to keep toolbars in view while manipulating content. It is acceptable to provide two-dimensional scrolling for such parts of the content.

In short: content must be usable at a width of 320 CSS pixels (or a height of 256 CSS pixels for horizontally scrolling content) without scrolling in two directions and without losing information or functionality – except for parts that need a two-dimensional layout.