Zoom and Reflow Testing

Zoom and reflow testing verifies that web content remains usable when
displayed at larger text sizes and when reflowed into a single column for
small viewports. These tests are critical for users with low vision who
increase text size or zoom level to read comfortably, and for users
accessing the web on small screens.
^[1]

---

WCAG criteria covered

1.4.4 Resize Text (AA) — Text can be resized up to 200% without loss
of content or functionality, except for captions and images of text.

1.4.10 Reflow (AA) — Content can be presented without loss of information
or functionality, and without requiring scrolling in two dimensions, at a
width equivalent to 320 CSS pixels. This applies to vertical scrolling
content (most websites) but not to content that requires two-dimensional
layout such as data tables, maps, and certain games.

---

Testing text resize (WCAG 1.4.4)

Method 1 — Browser text size settings

Most browsers allow the default text size to be increased independently
of page zoom. This tests whether the site uses relative units (em, rem)
rather than fixed pixel sizes:

• Chrome/Edge: Settings → Appearance → Font size — set to Very Large
• Firefox: Settings → General → Fonts and Colours → Size — increase to 24px or more

At increased text size, verify:

• All text remains readable and does not overflow its container
• No text is clipped or truncated
• No functionality is lost
• Controls remain usable

^[1]

Method 2 — Browser zoom to 200%

Use Ctrl + (Windows) or Cmd + (macOS) to zoom the browser to 200%. Verify:

• All content remains accessible
• No horizontal scrolling is required (unless content requires 2D layout)
• Text does not overflow containers or overlap other content
• Interactive elements remain functional

---

Testing reflow (WCAG 1.4.10)

Method 1 — Browser DevTools responsive mode

Open DevTools and activate the device toolbar (Ctrl + Shift + M in Chrome).
Set the viewport width to 320px. This simulates the minimum width
required by WCAG 1.4.10.

Verify:

• All content is readable in a single column without horizontal scrolling
• No content is clipped or hidden
• All functionality remains available
• Navigation is accessible (hamburger menus must be functional)
• Tables that cannot reflow are handled — either scrollable or replaced
  with an accessible alternative

^[2]

Method 2 — Browser zoom to 400%

Zooming to 400% on a 1280px viewport is approximately equivalent to a
320px viewport. Use Ctrl/Cmd + to zoom to 400%, then verify the same
criteria as above.

This method is useful when DevTools is not available or when testing
needs to match real-world user behaviour more closely, as many low vision
users use browser zoom rather than adjusting viewport size.

---

Common failures

Fixed pixel widths on containers. Using width: 800px on a container
causes horizontal scrolling when the viewport is narrower. Use max-width
with 100% or use responsive units.

Text in images. Images of text do not reflow and become unreadable at
small viewport sizes. Replace with actual text where possible.

Overflow hidden on containers. Content that overflows is cut off rather
than wrapping. Ensure text containers allow wrapping.

Absolutely positioned elements. Absolute positioning can cause content
to escape its container at small viewport sizes or when text is enlarged.

Fixed-size interactive elements. Buttons and inputs with fixed heights
in pixels may truncate text at larger font sizes.
^[3]

---

Testing PDF reflow

PDFs published on the web must also support reflow if they are within
scope. Tagged PDFs with correct reading order can reflow in PDF readers
with accessibility features enabled. Untagged PDFs do not reflow and
fail WCAG 1.4.10.

---

References

1. W3C Web Accessibility Initiative. Understanding Success Criterion 1.4.4: Resize Text. https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html ↑
2. W3C Web Accessibility Initiative. Understanding Success Criterion 1.4.10: Reflow. https://www.w3.org/WAI/WCAG22/Understanding/reflow.html ↑
3. WebAIM. Zoom and Resize — Techniques. https://webaim.org/techniques/fonts/ ↑