Goal
Ensure content reflows for small viewports and zoom without requiring two-dimensional scrolling.
Success Criterion · WCAG 1.4.10
Reflow
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 and horizontal scrolling content at a height equivalent to 256 CSS pixels.
Level AAWCAG 2.1Perceivable1.4 · Distinguishable
Copy button ready
What to do
Support reflow at 320 CSS pixels wide (or 256 CSS pixels high) without loss of content/functionality.
Why it matters
Users who zoom or use small screens must not be forced to scroll both horizontally and vertically to read or use content.
Success criterion
What WCAG 1.4.10 requires
Summarized directly from the official Understanding document so teams can quote the requirement accurately.
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for: (1) Vertical scrolling content at a width equivalent to 320 CSS pixels; (2) 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.
Intent
Why WCAG created this requirement
- Reflow supports low vision users who zoom and users on mobile devices.
- Two-dimensional scrolling is particularly difficult for magnifier users.
- Exceptions exist for content that truly requires two-dimensional layout for meaning or use.
Benefits
Who gains when you pass
- Low vision users can zoom and still read without constant side-to-side scrolling.
- Mobile users can use content comfortably in portrait orientation.
- Users with motor impairments benefit from simplified scrolling interactions.
- Users with cognitive disabilities benefit from less navigational friction.
Why it matters
User impact when this criterion fails
Summaries drawn from the Understanding document help you socialize impact statements with product stakeholders.
Users may abandon tasks when forced to scroll horizontally for each line of text.
Critical controls may become off-screen or hidden at high zoom.
Forms may become unusable if labels/inputs don’t stack and reflow.
Exception guidelines
Use the WCAG 1.4.10 exceptions correctly
Document the rationale for each exception and note which alternative support you provide.
Two-dimensional content
Some content requires both axes for meaning or use (e.g., maps, complex charts, data tables).
Requirement
Only the parts that require 2D layout are exempt; surrounding UI should still reflow.
Overview
At high zoom or on small screens, content should reflow into a single scrolling direction. You should not require users to scroll both horizontally and vertically to read text or complete tasks. Some content (like large data tables, maps, or diagrams) may legitimately require two-dimensional layout.
- Use responsive design: flex/grid that wraps, media queries, and fluid containers.
- Avoid fixed-width layouts and absolute positioning that prevents wrapping.
- Use `max-width` and allow content to wrap; avoid `white-space: nowrap` for text blocks.
- For data tables, provide responsive alternatives (stacked rows, summaries, or downloadable data).
Reference: All summaries and highlights originate from Understanding WCAG 1.4.10 and the W3C quick reference.
Fast facts
- Conformance level
- Level AA
- WCAG version introduced
- WCAG 2.1
- Principle
- Perceivable
- Guideline
- 1.4 · Distinguishable
Examples
Make success tangible for teams
Share pass/fail snapshots to coach designers, engineers, QA, and content authors.
Two-column layout
Pass
Sidebar collapses below content and the page becomes a single column at 320px.
Fail
Two columns remain fixed; users must scroll horizontally to read text.
Form
Pass
Labels and inputs stack vertically; buttons wrap to new lines.
Fail
Fields remain on one row and extend off-screen at high zoom.
Data table
Pass
Table is scrollable horizontally, and a “stacked row” view is available for small screens.
Fail
Entire page requires horizontal scrolling because the table forces the layout wider.
Evidence to keep
Document conformance decisions
Capture artifacts for VPATs, procurement reviews, and regression testing.
- Document responsive breakpoints and reflow behavior for key templates.
- List exempt components (tables/maps) and the alternative representations provided.
Official resources
Deep dives and supporting material
Keep these links handy when writing acceptance criteria or responding to audits.
Implementation checklist
Capture progress and blockers
- Adopt responsive layout patterns with flexible widths and wrapping.
- Avoid fixed pixel widths for main content containers; use fluid widths and max-width constraints.
- Ensure forms stack labels/inputs and controls reflow into one column when narrow.
- Check sticky sidebars and multi-column layouts collapse appropriately.
- Provide alternatives for large tables/graphs (responsive rendering, summaries, CSV export).
- Test with zoom and small viewport sizes, including in both orientations.
Testing ideas
Prove conformance with evidence
- Set viewport to 320 CSS px wide and verify no two-dimensional scrolling is required for typical content.
- Zoom browser to 400% on desktop and verify reflow behavior.
- Check key workflows (navigation, forms, modals) at narrow widths/high zoom.
- Verify only exempt content (tables/maps) requires 2D scrolling.
- Test both portrait and landscape constraints per the criterion.
Related success criteria
More from Distinguishable (1.4)
WCAG 1.4.1Use of ColorLevel AWCAG 1.4.2Audio ControlLevel AWCAG 1.4.3Contrast (Minimum)Level AAWCAG 1.4.4Resize TextLevel AAWCAG 1.4.5Images of TextLevel AAWCAG 1.4.6Contrast (Enhanced)Level AAAWCAG 1.4.7Low or No Background AudioLevel AAAWCAG 1.4.8Visual PresentationLevel AAAWCAG 1.4.9Images of Text (No Exception)Level AAAWCAG 1.4.11Non-text ContrastLevel AAWCAG 1.4.12Text SpacingLevel AAWCAG 1.4.13Content on Hover or FocusLevel AA