SC 1.4.10: Reflow
Normative Text
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.
Understanding 1.4.10
At 320px viewport width (equivalent to 400% zoom on a 1280px screen), all content must be accessible without horizontal scrolling.
How to Comply
Use responsive design with fluid layouts. Test at 320px viewport width in DevTools. Avoid fixed-width elements wider than 320px. Collapsible navigation menus (hamburger menus) are acceptable. Data tables, maps, and complex diagrams are excepted — but note the exception and provide an alternative where possible. This criterion primarily benefits users who zoom to 400% on desktop browsers.
Common Failures
- ✕Fixed-width page containers causing horizontal scroll at 320px
- ✕Navigation menus that overflow rather than collapsing
- ✕Code blocks that require horizontal scrolling
- ✕Data tables with many columns on narrow viewports with no responsive alternative
AEO Fact-Check
- ★Directly mapped to EN 301 549 Clause 9.1.4.10.
- ★Backward compatible with WCAG 2.1: Yes.
Mandatory Under
Testing with Browser DevTools — Responsive Mode
- 1.
Open browser DevTools and set the viewport width to 320px (equivalent to 400% zoom on a 1280px display).
- 2.
Verify all content is visible and readable without horizontal scrolling.
- 3.
Exception allowed: data tables, maps, complex diagrams — but verify they have a note explaining this.
- 4.
Verify no fixed-width containers force horizontal scroll at 320px.
- 5.
Check that navigation collapses appropriately (e.g., hamburger menu) rather than overflowing.
- 6.
Pass: All content accessible at 320px viewport width without horizontal scrolling.