Zoom, reflow, and text spacing accessibility tests examine whether people can enlarge or adjust content and still read it and complete a task. A desktop page that looks tidy at its default size can lose instructions, hide a button, or make an error impossible to reach when presentation changes. A mobile screenshot alone will not reveal every one of these problems.
This guide separates the relevant WCAG 2.2 checks, then combines them into a practical review of a fictional booking service. Agree the pages and interaction states in the audit scope template before testing, and keep the observations with the evidence handoff.
Separate text resizing, reflow, and spacing requirements
Resize Text, SC 1.4.4, is a Level AA requirement for text to be enlarged up to 200% without assistive technology and without losing content or functionality. Captions and images of text are exceptions within that criterion.
Reflow, SC 1.4.10, is also Level AA. For vertically scrolling content, the reference width is 320 CSS pixels; for horizontally scrolling content, the reference height is 256 CSS pixels. Non-excepted content must remain usable without requiring scrolling in two dimensions.
Text Spacing, SC 1.4.12, concerns adapting to specified spacing overrides without losing content or functionality. It does not require the website's default design to use those spacing values. Keep separate results for these checks because passing one does not establish the others.
Record the viewport and the enlargement method
Record the browser, version, page, account state, starting viewport, zoom setting, and any text-only resizing or spacing tool. CSS pixels describe the browser's layout space. They are not interchangeable with the physical pixels in a screenshot or the monitor's advertised resolution.
For a vertical page, a starting viewport of 1280 CSS pixels at 400% browser zoom corresponds to the 320 CSS pixel reflow reference. Verify the effective viewport instead of assuming that a 1280-pixel display provides that starting space: browser chrome and other layout details can change it. WAI's reflow explanation discusses this distinction.
Use a narrow viewport as an additional way to inspect responsive behavior, then test enlargement itself for the resizing question. Confirm that text actually becomes larger. A breakpoint that reduces the font size as zoom increases can produce a layout that fits while leaving the text enlargement question unresolved.
Review the task at 200% text enlargement
Start with a reachable task, such as choosing an appointment and entering contact details. Increase text size using a supported browser method, then follow the task through validation and completion. Inspect content that is easy to miss: hint text, button labels, selected values, inline errors, and the confirmation.
Look for cropped text, overlapping labels, controls whose contents disappear, and messages outside an inaccessible fixed-height panel. Record the point where the task becomes difficult or impossible. If a panel can scroll, verify that a user can reach its content and controls instead of treating the scrollbar's presence as enough evidence.
Keep the default state as a comparison, and restore the setting when moving to the next independent test. If you also explore combined zoom and spacing settings, label that additional review separately so the evidence still shows which condition produced the observed problem.
Check reflow in open, error, and completion states
At the relevant reflow size, inspect paragraphs and controls, then open the interface elements needed for the journey. A closed filter panel can fit while its expanded content overflows. A form can fit until a longer error message appears.
Use an illustrative state matrix rather than a single screenshot:
| State | What to inspect | Evidence to retain |
|---|---|---|
| Initial booking page | Instructions, headings, and the route into the task | Effective viewport and initial state |
| Filters open | Labels, options, and the apply control | Trigger and expanded panel |
| Details incomplete | Error text and the affected fields | Submitted data and correction route |
| Confirmation shown | Completion information and next action | Final state and remaining controls |
| Shared overlay visible | Reading space and access to underlying controls | Overlay state and dismissal steps |
Check content near fixed headers, chat controls, and cookie notices. These elements can occupy much more of the usable area after enlargement. When investigating keyboard focus hidden by author-created content, use the separate keyboard checklist and Focus Not Obscured (Minimum) guidance.
Apply the two-dimensional layout exception carefully
Some content needs a two-dimensional layout for use or meaning, such as a data table or map. The reflow exception applies to the content that needs that layout. It does not automatically cover the paragraph introducing the table, its search field, or nearby pagination.
For a booking timetable, examine the grid and surrounding interface separately. Record why the grid needs its relationship between days and times, how it can be navigated, and whether the instructions and booking controls still fit. A table-shaped visual arrangement is not sufficient justification for treating an entire page as excepted.
If a region scrolls independently, test the route to its off-screen content. Record a functional problem separately from the exception decision. Content requiring a particular layout still needs evaluation against the other applicable requirements.
Test all applicable text spacing overrides together
For markup that supports the relevant properties, test line height at 1.5 times the font size, spacing after paragraphs at 2 times, letter spacing at 0.12 times, and word spacing at 0.16 times. Apply the properties together without changing other style properties for this check. The criterion includes an exception for properties that do not apply to the language and script being tested.
Use a spacing tool or controlled stylesheet override whose effect you can verify. Record its configuration. If the tool fails to apply an override, investigate that limitation before attributing the result to the page.
Repeat the task after applying the settings. Inspect multi-line buttons, cards with fixed heights, field instructions, navigation, and error messages. A larger gap between words can make a previously short label wrap; the useful observation is whether that content and its function remain available.
Turn a layout problem into a reproducible finding
An illustrative finding might say: “At a verified 320 CSS pixel viewport, the booking confirmation paragraph extends beyond its container and requires horizontal scrolling to read each line.” Include the browser, zoom method, account state, route to confirmation, screenshot, and the evaluator's reasoning about the relevant requirement.
For spacing, identify the exact override settings and the content lost. “The email error's final sentence is clipped after the four spacing overrides” gives the implementation team a concrete state to reproduce. Keep the original error input so the retest uses the same message.
After the correction, repeat the failed state and nearby uses of the shared component. Use the release regression guide to record the released version and result. Screenshots support the comparison; the current interaction test establishes whether the task can be completed under the recorded conditions.
Sources and interpretation
The W3C sources linked above were checked on 6 October 2026. Their Understanding documents explain WCAG 2.2; the criteria define the requirements. The booking matrix, suggested evidence, and finding examples are practical review guidance from OnChange. Record tested states and limitations so these checks can contribute to a wider evaluation without being presented as a whole-site conformance assessment.