Skip to content
UX Atlas
Plate A11Y·013 · AccessibilityGrid A3 · Rev. 2026-09-14

Reflow and Zoom

Content must work at 400 percent zoom without horizontal scrolling, which is the same as working at 320 pixels wide.

AccessibilityCraft conventionIntermediate

Definition

WCAG 1.4.10 requires content to be presentable without loss of information or functionality, and without two-dimensional scrolling, at a width equivalent to 320 CSS pixels. Data tables and complex diagrams are exempt.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2Testing it
  3. 3Where reflow fails, and what to do
  4. 4Building for 320 pixels
  5. 5400 percent zoom is a 320 pixel viewport
  6. 6Commonly confused with
  7. 7Local chart
  8. 8Sources
  9. 9Continue from here

Reach for this when

  • Accessibility review.
  • Testing responsive behaviour.
  • Reviewing admin and internal tools, which are frequently skipped.

Common mistakes

  • Fixed-width containers.
  • Sticky chrome that dominates a short viewport.
  • Desktop-only application shells.

Testing it

  • Set the browser to 400 percent zoom on a 1280 pixel wide window. That is the 320 pixel equivalent.
  • Check that no horizontal page scrolling is required.
  • Check that sticky headers and footers do not consume the whole viewport.
  • Check that fixed-position elements do not cover content.
  • Check that long strings such as URLs wrap rather than forcing overflow.
  • Check that modals remain fully visible and scrollable.

Where reflow fails, and what to do

SurfaceWhat breaksApproach
Data tablesHorizontal scrolling of the whole page rather than the tableScroll the table inside its own container, which the criterion permits, and keep the first column visible.
DashboardsFixed multi-column grids that never collapseReflow to a single column and let the primary number come first.
ModalsFixed height, so the actions end up off screenCap the height in viewport units and scroll the body, never the buttons out of reach.
Sticky headers and footersTogether they consume most of a zoomed viewportCollapse or unstick them below a height threshold.
Long unbroken stringsA URL or token forces the page wideroverflow-wrap: anywhere on the containers that receive user content.
Side-by-side editorsTwo panes that cannot both be usable at 320 pixelsStack them with a toggle, since two-dimensional scrolling is only allowed where it is essential.

Building for 320 pixels

Do

  • Test at 400 percent zoom on a 1280 pixel window, which is the equivalent the criterion describes.
  • Let content scroll in one direction only, vertically for most pages.
  • Allow a specific region to scroll horizontally where the content genuinely requires it, such as a wide table or a diagram.
  • Check the admin and internal tools, since those are where the failures actually are.

Do not

  • Do not set a min-width on the page or its main containers.
  • Do not keep several fixed-position bars visible at high zoom.
  • Do not hide functionality at narrow widths that is available at wide ones, since zoomed users get the narrow layout.
  • Do not rely on a device-width media query to detect this. A zoomed desktop reports a narrow viewport and is not a phone.

400 percent zoom is a 320 pixel viewport

1280 wide400% zoom320 equivalentone direction of scrollingsame content, same functions
Someone zoomed to 400 percent on a laptop gets the narrow layout. Anything hidden at that width is hidden from them, which is why feature parity between breakpoints matters.

Commonly confused with

Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.

vs.

Text Resize

Accessibility

Text scales to 200 percent without losing content or function, layout unchanged.

Key difference

Reflow is about the viewport: everything must work in a 320 pixel column with no sideways scrolling. Text resize is about the type alone scaling to 200 percent. A fluid layout can pass reflow and still break when only the text grows.

Use Reflow and Zoom when

  • The whole layout has to survive, not just the words.
  • The failure is two-dimensional scrolling or a clipped region.
  • You are testing by narrowing the window or zooming the page.

Use Text Resize when

  • Only the type size is changing, as with an OS font setting.
  • The failure is text clipped inside a fixed-height container.
  • The fix is relative units instead of absolute ones.

Learn about Text Resize

Local chart

A11Y·013 · Region V · Grid A3

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Data TableCMP·025 · RELIED ON BYText ResizeA11Y·014 · COMMONLY CONFUSED WITHPutting a Data Table on a PhoneCASE·005 · PRACTICAL EXAMPLEAccessibility ChecklistCHK·002 · CHECK YOUR WORKWeb UX ChecklistCHK·011 · CHECK YOUR WORKText SpacingA11Y·015 · RELATED CONCEPTBreakpointsFND·045 · RELATED CONCEPTContainersFND·041 · RELATED CONCEPTResponsive LayoutFND·043 · RELATED CONCEPTDesign QAFLOW·003 · RELATED CONCEPT

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  1. [1]

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A Data TableA Pricing PageAn Ecommerce ExperienceAn Enterprise Workflow

Relied on by

Entries that assume this is already in place.

Practical example

A worked decision where this was the deciding factor.

Check your work

Review passes that test whether this was done properly.

Related concept

Connected closely enough to change how you apply this.