Zoom and Reflow Testing at 400 Percent

Low-vision users routinely browse at 200% to 400% zoom, often with a screen magnifier on top. Data pages are where zoom breaks most visibly: wide tables push the whole page sideways, sticky headers swallow most of the viewport, filter toolbars overflow, charts shrink to unreadable thumbnails or burst out of their containers, and text inside fixed-height cells is clipped. None of this is found by automated scans, and all of it takes minutes to find by hand.

This page is the audit procedure for three related criteria — Reflow, Resize Text and Text Spacing — applied to data pages. It belongs to manual accessibility audits.

Spec reference

  • SC 1.4.10 Reflow (AA) — content usable at 320 CSS pixels wide without two-dimensional scrolling, except parts that require two-dimensional layout (data tables, maps, diagrams). Tested by zooming a 1280 px wide window to 400%.
  • SC 1.4.4 Resize Text (AA) — text can be resized to 200% without loss of content or functionality. Tested with browser zoom (or text-only zoom) at 200%.
  • SC 1.4.12 Text Spacing (AA) — no loss of content when line height is 1.5×, paragraph spacing 2×, letter spacing 0.12× and word spacing 0.16× the font size.
  • SC 2.4.11 Focus Not Obscured (AA) — at zoom, sticky content is more likely to cover focused elements.

The data-table exception in 1.4.10 applies to the table itself, not to the page around it; see meeting SC 1.4.10 reflow with wide data tables.

The zoom audit, in three passes Steps of a zoom and reflow audit: 400 percent reflow pass, 200 percent resize pass, and text spacing pass, with what to check in each. The zoom audit, in three passes400% reflow1280 px window zoomed to 400%: only exempt parts scroll sidewaysSC 1.4.10200% resizeall text larger; nothing clipped, overlapping or hiddenSC 1.4.4Text spacingapply spacing overrides; nothing clipped or lostSC 1.4.12Focus at zoomTab through key controls; nothing hidden under sticky barsSC 2.4.11
Three passes, each testing a different criterion — do them in this order on each data page.

When to run it — and on which pages

Run it on every page type in a data product: list pages with tables, detail pages, dashboards, report pages with charts, and any page with a filter toolbar. One representative page per type is usually enough, repeated when layouts change.

Run it before release for any new layout component — sticky headers, toolbars, card grids — because those set the zoom behaviour for every page that uses them.

The misapplication to name is testing reflow by resizing the window to 320 px at 100% zoom. That tests a phone layout, not zoom: fixed-size elements such as sticky bars, dialogs with pixel widths, and font sizes set in pixels behave differently. Always zoom a desktop-width window.

Annotated code example

ZOOM AUDIT — Invoices list page — build 2026.09.18 — Chrome 128, 1280×1024 window

PASS 1: 400% (viewport ≈ 320×256 CSS px)
  [ ] Page scrolls vertically only (no horizontal scrollbar on the page)
  [ ] Header / navigation collapse to a menu and remain operable
  [ ] Filter toolbar wraps or collapses; every control reachable
  [ ] Table: scrolls horizontally INSIDE its own container (exempt, record below)
  [ ] Pagination wraps below the table
  [ ] Sticky header + page bar take < 1/3 of viewport height
  [ ] Dialogs fit; their buttons are reachable without horizontal scrolling
  Exemptions: invoice table (compare across 9 columns) — container scroll, focusable

PASS 2: 200%
  [ ] All text larger, including table cells, chart labels, badges
  [ ] No text clipped in fixed-height cells or buttons
  [ ] No overlapping labels in charts or toolbars

PASS 3: Text spacing (apply stylesheet below at 100%)
  [ ] Cell text wraps, not clipped
  [ ] Buttons and chips grow; labels not cut off
  [ ] Tooltips and popovers still readable
/* Text spacing test stylesheet (SC 1.4.12) — inject via DevTools or a bookmarklet */
* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
p { margin-bottom: 2em !important; }
// Console check at 400%: does anything outside the exempt table overflow the viewport?
[...document.querySelectorAll('body *')]
  .filter((el) => el.getBoundingClientRect().right > window.innerWidth + 1)
  .filter((el) => !el.closest('.table-scroll'))            // exempt container
  .map((el) => el.tagName + (el.className ? '.' + String(el.className).split(' ')[0] : ''))
  .slice(0, 20);

The console snippet lists elements poking past the right edge that are not inside the exempt table container — usually the toolbar, a pixel-width dialog, or a long unbreakable string.

Keyboard & AT behaviour

Check at 400% Expected Failure indicator
Tab through the filter toolbar Every control reachable and visible Controls off-screen to the right
Tab into the table container Container focusable; arrows scroll it Columns unreachable
Tab to a row link low in the table Row fully visible below sticky header Row hidden under the header (2.4.11)
Open a dialog Dialog fits; Save button reachable Dialog wider than viewport
Screen magnifier following focus Focused element in the magnified view Magnifier shows the sticky header
Common zoom findings on data pages Matrix of frequent 400 percent and 200 percent zoom findings on data pages, the criterion each fails, and the usual fix. Common zoom findings on data pagesFindingCriterionUsual fixPage scrolls sideways1.4.10Remove page min-widthToolbar clipped1.4.10flex-wrap or overflow menuSticky areas fill the screen2.4.11Release stickiness at short heightsCell text clipped1.4.4 / 1.4.12No fixed row heightsChart labels overlap1.4.4Scale labels; wrap; table view
Almost none of these are in the table itself — they are in the page around it.

Integration context

Reflow decisions for tables — scroll, cards or column chooser — are covered in responsive data tables, and the sticky-header limits in sticky table headers and first columns. Repeat the navigate and edit stages of the keyboard-only audit script at 400%, where focus visibility fails most often.

An automated proxy — a Playwright test at a 320×256 viewport asserting no page-level horizontal overflow — catches regressions between audits, but it cannot judge clipping and overlap the way a person can.

Resizing the window versus zooming Comparison of testing reflow by shrinking the window to 320 pixels at 100 percent zoom against zooming a 1280 pixel window to 400 percent. Resizing the window versus zooming✗ Narrow window at 100%Tests the mobile breakpointPixel-sized elements stay smallSticky bars take their normal heightMisses zoom-specific failures✓ 1280 px window at 400%320 CSS px viewport, like a zoomed userEverything scales, including fixed sizesSticky bars take their real shareMatches the criterion's test method
Only zoom scales fixed-size elements — which is where data pages break.

Gotchas

Browser zoom versus OS scaling. Operating-system display scaling changes device pixel ratio, not CSS viewport width in the same way. Use browser zoom for the audit.

Text-only zoom. Firefox’s “Zoom text only” tests SC 1.4.4 more strictly; layouts that pass page zoom can clip text under text-only zoom.

Charts in canvas. Canvas charts do not reflow their labels; check that the chart scales with its container and that its data table is available.

Design system notes

Add a 400% zoom check to the definition of done for layout components — headers, toolbars, dialogs, card grids, tables — with screenshots at 400% in the component docs. Most page-level zoom failures trace back to a component that was only ever reviewed at 100%.

Testing checklist

FAQ

How do I test SC 1.4.10 Reflow?

Set the browser window to 1280 CSS pixels wide and zoom to 400 percent, which gives a 320 pixel wide viewport. Content should need only vertical scrolling, except parts such as data tables that need two-dimensional layout.

Is testing at a 320 pixel window width the same as 400 percent zoom?

Not quite. Zoom also scales fixed-size elements like sticky headers and pixel-width dialogs, which is where many data pages fail. Test by zooming.

How do I test text spacing?

Apply a stylesheet or bookmarklet that sets line height to 1.5, letter spacing to 0.12em, word spacing to 0.16em and paragraph spacing to 2em, and check that nothing is clipped or lost.

Do data tables fail reflow if they scroll horizontally at 400 percent?

No, data tables are an explicit exception, provided they scroll within their own container, that container is keyboard operable, and the rest of the page reflows.

← Back to Manual Accessibility Audits