WCAG AA · 1.4.10, 1.4.4, 1.4.12Checked on paid plansEU · US
The page breaks when zoomed or on a narrow screen
What do WCAG reflow and resize text ask for?
That pages work at 400% zoom without sideways scrolling (WCAG 1.4.10). Text must grow to twice its size without being cut off (1.4.4), and wider spacing must not hide text (1.4.12).
Why it matters
Many people with low vision browse at 200% to 400% zoom. Wide tables, fixed-width banners and boxes with a fixed height make them scroll sideways on every line, or cut off prices and buttons completely.
How to fix it
Shopify
- Look for custom sections or apps with fixed widths, such as wide size charts, embedded tables or banners set in pixels.
- In Theme settings, Custom CSS, add img, table, iframe { max-width: 100%; } as a safety net.
- Wrap wide size charts in a box that scrolls on its own, so the page around it doesn’t.
WooCommerce
- Page builders often set fixed widths and heights on sections; change them to auto or a max-width.
- Wrap wide comparison and size tables in a scrolling container in the block editor.
- Check that the theme’s viewport tag doesn’t include maximum-scale=1 or user-scalable=no.
In the code
- Replace fixed widths (width: 1200px) with max-width and flexible layouts.
- Add responsive breakpoints so columns stack at narrow widths.
- Avoid fixed heights on boxes that hold text; use min-height instead.
- Don’t combine overflow: hidden with fixed sizes on text containers.
- Let text boxes grow: avoid fixed heights and overflow: hidden on text.
- Test with a text-spacing bookmarklet after layout changes.
Automated tools can tell that something overflows, not whether it is allowed to: maps, data tables and carousels may scroll in two directions under WCAG. They also can’t judge whether content that reflows still reads in a sensible order.
The standard behind this rule
A plain summary, not legal advice.