WCAG 2.2 - Success Criterion
1.4.10 Reflow
Description
Content must be presentable without loss of information or functionality, and without requiring scrolling in two dimensions, when displayed at a width equivalent to 320 CSS pixels. This corresponds to a viewport set to 1280 CSS pixels wide and zoomed to 400%. Users with low vision commonly use high zoom levels to read content, and requiring horizontal scrolling in addition to vertical scrolling when zoomed creates a significant cognitive and motor burden.
How To Test
- Open the page in a desktop browser at a viewport width of 1280px.
- Zoom the browser to 400% using Ctrl/Cmd + + or browser zoom settings.
- Check whether horizontal scrolling is required to read any content.
- Scroll vertically through the entire page and verify all content remains visible and readable without horizontal scrolling.
- Alternatively, use browser developer tools to simulate a 320px-wide viewport and test the same conditions.
- Identify any content that is lost, hidden, or overlapping at this zoom level.
- Note whether any two-dimensional scrolling content (tables, maps) is contained in a scrollable region with appropriate labels.
Testing Tools
- Color Contrast Analyser (CCA) — Free desktop app. Download from GitHub, install, use the eyedropper tool to measure contrast ratios on the demo. Read the ratio value and compare to AA (4.5:1) or AAA (7:1) standards.
- Lighthouse — Built into Chrome DevTools. Open DevTools (F12), go to Lighthouse tab, select "Accessibility", and run the audit. Review contrast violations and pass criteria in the results.
- axe DevTools — Browser extension for Chrome/Firefox. Install from official page, open DevTools, go to axe tab, run scan, and see detailed contrast violations with remediation advice.
Demo
The table below has a fixed width of 600 px - at 400% zoom or on small screens it requires horizontal scrolling, causing users to lose context.
| Product | Units | Revenue | Region | Status |
|---|---|---|---|---|
| Widget A | 1,240 | £24,800 | North | On target |
| Widget B | 870 | £17,400 | South | Below target |
The same data is presented as a stacked card list - no fixed widths, no horizontal scroll at any viewport width or zoom level.
- Units
- 1,240
- Revenue
- £24,800
- Region
- North
- Status
- On target
- Units
- 870
- Revenue
- £17,400
- Region
- South
- Status
- Below target
Code
Navigation menu with flex-wrap: nowrap in a 320px-wide viewport - requires horizontal scrolling to reach all items.
In code: display: flex; flex-wrap: nowrap; overflow-x: auto
Navigation menu with flex-wrap: wrap - items naturally flow to multiple lines without horizontal scrolling.
In code: display: flex; flex-wrap: wrap
Why this fails
Navigation items are forced onto a single line using flex-wrap: nowrap. At narrow viewports (320px or less), users must scroll horizontally to reach items beyond the initial viewport width. Users with cognitive disabilities or those using mobile devices cannot easily scroll and access all navigation links.
Why this passes
Navigation items use flex-wrap: wrap, allowing them to reflow naturally across multiple lines as viewport width decreases. All navigation items remain accessible without horizontal scrolling, meeting the 320px width requirement of WCAG 1.4.10.
Code
A popup with overflow:hidden and a fixed height. Content at the bottom is cut off — users can't reach the submit button. Found in real-world feedback and modal audits.
The Submit button and textarea are cut off — unreachable.
Same popup with overflow:auto and max-height. All content scrollable and accessible.
Feedback
How was your experience today?
Users can scroll to reach all content. Use max-height + overflow:auto.
Code
Fail Explanation
A failure occurs when zooming to 400% (or viewing at a 320px-wide viewport) causes the page to require horizontal scrolling to access content, or when content becomes hidden or lost at that zoom level. Common failures include fixed-width layouts that do not adapt responsively, tables that do not scroll or collapse at small viewports, navigation bars that overflow their containers, and side-by-side column layouts that do not reflow to a single column. Data visualizations rendered at a fixed size that cannot be scrolled within a container can also fail.
Pass Explanation
A passing implementation uses responsive design so that at a 320px viewport width, all content reflows into a single column that can be read by scrolling vertically only. This is typically achieved using CSS media queries, flexible grid layouts, and relative units. Content that requires two-dimensional scrolling by nature - such as data tables, maps, diagrams, or media players - is exempt from this requirement, provided the rest of the page still reflows correctly.
Notes
This criterion was added in WCAG 2.1 and is closely related to responsive web design practices. The 320 CSS pixel threshold was chosen because it corresponds to 1280px at 400% zoom, which is a common zoom level for low-vision users. Content that inherently requires two-dimensional layout - such as complex spreadsheets or video players - is explicitly excluded.
Techniques
WCAG techniques used in this demo: C31, C32, C34, C38
Suggested Solutions & References
Curated from 10 real-world audit findings and official WCAG guidance.
Official W3C / WAI
- Understanding SC 1.4.10: Reflow
- Technique C31: Using CSS Flexbox for reflow
- Technique C38: Using CSS width, max-width and flexbox