1.4.10 - Reflow (Level AA)
High-Level Description
This criterion ensures that content can be viewed without scrolling, both horizontally and vertically, when zoomed up to 400%. It supports users with low vision, mobile users, and those using screen magnifiers.
Detailed Description
1.4.10 requires that web content adapts to the viewport when zoomed to 400%. This equates approximately to a 320 CSS pixel-wide viewport. Content must be readable and operable without requiring horizontal scrolling. Exceptions are allowed for complex images, interactive tools, maps, data tables, and certain multi-part components.
Indicators of Non-Compliance:
- Horizontal scrolling is required on zoomed views
- Fixed-width containers or tables that don't wrap
- Layout breaks or overlaps when zoomed
- Text is clipped or hidden when scaled
Real-World Examples
| Scenario | Non-Compliant | Compliant |
|---|---|---|
| A table with multiple columns | The table needs to be scrolled horizontally to see all columns | The table fits the page and does not require horizontal scrolling |
| Navigation menu with many items | The menu stays in a single horizontal row and overflows off the screen at high zoom | Menu items wrap to multiple lines or collapse into a vertical or expandable menu (e.g., hamburger menu) |
| A page uses fixed- width containers | When users zoom to 400%, text and controls extend off the screen, forcing horizontal scrolling | The layout uses flexible widths (percentages, max-width) so content reflows naturally at high zoom levels |
- A two-column form requires horizontal scrolling to see field labels
- A responsive page stacks columns vertically on small screens and zoomed views
Disability Impact
| Disability Group | Without Reflow | With Reflow |
|---|---|---|
| Low Vision | Requires horizontal scrolling | Readable in a single column layout |
| Screen Magnifier Users | Content spills off screen | Layout adjusts and remains in view |
| Mobile Users | Zoomed content becomes unusable | Content reflows to fit screen width |
Supporting Documentation
Remediation Strategies
1 - Responsive Layouts
Use responsive design principles with fluid grids and media queries so content adapts smoothly to different screen sizes and zoom levels
2 - Flexible Sizing Techniques
Avoid fixed-width containers, use percentages or flexbox to allow layouts to reflow naturally
3 - High Zoom Testing
Test at 400% zoom using browser tools or device emulators to verify readability and usability
4 - Content Visibility
Ensure no essential content or functionality is hidden or clipped or requires horizontal scrolling when zoomed or resized