About this block

Zoom Reflow Audit tests key Acme app pages against WCAG 1.4.10 at 200 and 400 percent browser zoom in a 1280px window. A two panel wireframe legend opens the block, contrasting a clean single column reflow with a clipped layout that forces horizontal scrolling. Below it, a per page table lists each route with a reflow status badge at both zoom levels and a note on what breaks.

Pages are one typed array and the header pass count derives from it, counting only pages that pass at both levels. The status config maps reflows, partial, and overflows to their badge variants so a page that holds at 200 percent but fails at 400 reads clearly.

When to use

Reach for this block on the accessibility or QA page, wired to your own zoom test results. Scrolling inside a data table or code block is allowed; scrolling the whole page horizontally is the failure this criterion targets.

A natural flow around it on an Application Pro page:

Before

• A11y checklist panel

After

• Contrast checker card
• Touch target audit

What you can display

One strong use is the per page reflow test log. Other audit shapes:

• Text spacing check. The same page list tested against the WCAG 1.4.12 spacing overrides.
• Small viewport pass. Results captured at a real 320px width rather than emulated through zoom.
• Regression queue. Only the pages that fail, held until each fixed width region is made fluid.

Tip: 400 percent zoom in a 1280px window is equivalent to a 320px viewport, so one reflow pass covers both the zoom and the small screen case.