Glossary / Zoom and reflow
Zoom and reflow
Zoom and reflow allow people with low vision, cognitive disabilities, or small displays to enlarge content and read it without losing information or functionality. WCAG distinguishes text resize from reflow: text must resize to 200% without loss, while content at a narrow equivalent viewport must generally fit one-dimensional scrolling. A responsive layout should adapt to enlarged text and narrow widths instead of clipping, overlapping, or forcing users to scroll in two directions for ordinary content.
What to know
- WCAG 2.2 SC 1.4.4 AA requires text resize to 200% without assistive technology and without loss of content/functionality, except captions and images of text.
- SC 1.4.10 AA Reflow tests content at a width equivalent to 320 CSS pixels for vertically scrolling content (and 256 CSS pixels high for horizontally scrolling content), without requiring scrolling in both dimensions for reading/operation, except content that inherently requires two-dimensional layout.
- Browser zoom changes the CSS viewport and triggers responsive behavior; text-only zoom and user font settings can expose different defects.
- The exceptions for two-dimensional content are narrow: data tables, maps, diagrams, and interfaces where spatial relationships are essential may require two-dimensional navigation, but surrounding content should still reflow.
- Avoid fixed heights, clipped overflow, viewport-locked dialogs, absolute positioning for text layouts, and controls sized only for one font size.
- WCAG 2.2 SC 1.4.12 Text Spacing (AA) requires no loss when users apply specified line, paragraph, letter, and word spacing overrides.
Testing
Test 200% text enlargement and 400% browser zoom at a 1280 CSS-pixel desktop viewport (which yields approximately 320 CSS px), plus small mobile widths. Check menus, forms, tables, dialogs, sticky UI, long translations, and error messages. Verify that focus remains visible and that controls remain operable. Use flexible units, intrinsic sizing, wrapping, and responsive layout. Do not disable browser zoom with user-scalable=no or restrictive maximum-scale settings.
Interview questions
- How are Resize Text and Reflow different? Resize Text targets 200% text enlargement; Reflow addresses reading and operation at a narrow effective viewport without two-axis scrolling except for essential 2D content.
- Does a responsive layout guarantee reflow? No. It must be tested at specified conditions and across actual content and states.
- Why are fixed heights risky? Enlarged text or translated content may overflow and become clipped or overlap other content.
- Can a data table scroll horizontally? Potentially, because two-dimensional content can be essential; keep the rest of the page reflowable and provide usable table navigation.
- What is a useful regression strategy? Automated viewport/zoom checks plus manual inspection of critical journeys, keyboard focus, and content at large text settings.