Testing Reflow at 400 Percent Zoom Before the Sale Starts

WCAG 1.4.10 reflow and 1.4.4 resize text are where sale pages quietly fail: sticky bars, clipped prices, and two-direction scrolling at 320 CSS pixels wide.

Set a browser to 1280 pixels wide, zoom to 400 percent, and open your best sale page. That is the 1.4.10 reflow test, and it is the one most likely to embarrass a store that passed every automated check it ran. Prices slide under sticky bars. The discount banner eats the top third of the screen. The size selector needs sideways scrolling to reach the last option.

Reflow is Level AA. At a viewport 320 CSS pixels wide, which is what 400 percent zoom on a standard screen produces, content has to work without two-dimensional scrolling. Text can scroll vertically. It cannot demand a horizontal trek to finish a sentence or a checkout field.

What actually breaks at 320 pixels

Sticky elements break first. A sticky add to cart bar, a sticky header, and a sticky promo strip can stack until the product itself is a thin band in the middle of the screen. None of them fails a contrast check. Together they make the page unusable, which is the thing the criterion is really measuring.

Tables break second. Size charts and comparison tables built as fixed-width grids either overflow or shrink their text below readable size. The fix is a table that reflows into stacked rows or scrolls inside its own clearly bounded region, not a page that scrolls sideways as a whole. Data tables get some latitude under the criterion. Layout tables pretending to be design do not.

Resize text is a separate test, and people skip it

WCAG 1.4.4 asks for text that survives 200 percent resizing without loss of content or function, and it is not the same test as reflow. A page can reflow politely at 400 percent zoom and still clip text inside fixed-height cards when the text alone grows: the product name truncates, the price wraps under the button, the error message on a form field gets cut in half by its own container.

Run both. Zoom the whole page for reflow, then resize text only, through browser text settings or a text spacing pass, and look specifically at cards, badges, and buttons, the components with fixed heights someone set in a design file and nobody questioned since.

Do this before the sale, not during it

Sale pages are assembled in a hurry from campaign blocks, countdown modules, and badge overlays, usually by whoever is free, on a theme nobody wants to touch mid-quarter. That is precisely why they fail a test the everyday product page passes. The campaign components are the newest, least reviewed code on the site.

So put the reflow pass on the campaign checklist, next to the discount code test and the inventory check. Ten minutes at 320 pixels wide on the landing page, one product page, and the cart. If a keyboard user at high zoom cannot reach the checkout button without fighting a sticky bar, the sale is not ready, whatever the conversion forecast says.

Related reading

If this topic is useful, these earlier guides go deeper on connected questions: Accessible Gift Message and Delivery Instruction Fields at Checkout, Accessible Address Form Errors: Where Checkout Loses the Plot, and Accessible Password Creation: Where Signup Forms Lock People Out.

Frequently asked questions

What viewport width does the reflow criterion use?

320 CSS pixels for vertical scrolling content, which matches a 1280 pixel wide screen zoomed to 400 percent. Content must not require scrolling in two directions at that width.

Are data tables exempt from reflow?

Tables that genuinely need two dimensions to make sense can scroll within themselves. The page as a whole still cannot require horizontal scrolling, and layout grids get no exemption.

What is the difference between 1.4.4 and 1.4.10?

Resize text, 1.4.4, covers text growing to 200 percent without losing content or function. Reflow, 1.4.10, covers the whole layout at 320 CSS pixels. A page can pass one and fail the other.

Which components fail reflow most often?

Sticky headers and add to cart bars, fixed-height product cards, wide size chart tables, and campaign banners sized for desktop and never checked smaller.