A visitor with low vision opens your site on a laptop and presses Ctrl and plus a few times, as she does on every site. At 200 percent the menu overlaps the logo. At 300 percent the “Book now” button has slid off the right edge and she has to scroll sideways to find it. At 400 percent the sticky header fills half the screen and the cookie notice fills the other half.
That is what the WCAG reflow and resize rules are about: people who need things bigger should still be able to read and use the page. You can test all of it yourself with nothing more than browser zoom, and the fixes are usually CSS rather than a redesign. This post explains the three criteria involved, a step-by-step zoom test, and the layout habits that cause most failures.
Who zooms, and why it breaks things
Browser zoom is assistive technology that hardly anyone thinks of as assistive technology. People with low vision use it constantly, often alongside a larger system font size. Older visitors use it. People with migraines or tired eyes at the end of the day use it.
When you zoom, the browser makes everything bigger and, in effect, makes the window narrower in CSS pixels. A 1280-pixel-wide laptop window at 400 percent zoom behaves like a 320-pixel-wide screen. A well-built responsive site responds by switching to its mobile layout. A site with fixed widths, fixed heights or clever absolute positioning starts clipping, overlapping and scrolling sideways.
The three criteria, in plain words
1.4.4 Resize Text (Level AA)
Text can be resized up to 200 percent without assistive technology, and nothing is lost: no text cut off, no buttons that stop working, no content hidden behind other content. Browser zoom is the usual way people do this. Captions and images of text are exceptions.
1.4.10 Reflow (Level AA)
Content can be shown at a width of 320 CSS pixels without needing to scroll in two directions. For a normal page that scrolls down, WCAG reflow means no horizontal scrolling to read text or reach controls. Some content is allowed to need two-dimensional space: data tables, maps, diagrams, video and similar. A wide table can scroll sideways inside its own box; the whole page should not.
1.4.12 Text Spacing (Level AA)
If a user increases line height, paragraph spacing, letter spacing and word spacing (some people do this with a browser extension or their own style sheet because it makes text easier to read), nothing is lost. To test it, set letter spacing to 0.12 times the font size, word spacing to 0.16 times, line height to 1.5 times and paragraph spacing to 2 times; free bookmarklets do this in one click. What fails is text cut off inside fixed-size boxes or overlapping the next element.
The three are related but not the same. You can pass reflow and still fail text spacing, for example, when a button with a fixed height cuts off its own label once letter spacing goes up.
How to test resize text at 200 percent and reflow at 400
Use a desktop browser. Testing on a real phone is a different job, covered in our post on testing on an actual phone; this test is about zoom.
- Set your browser window to about 1280 pixels wide. On most laptops a maximized window is close enough.
- Open a template page: homepage, a normal page, a blog post, a product page, the contact page.
- Zoom to 200 percent (Ctrl and plus on Windows, Command and plus on a Mac). Read the page top to bottom. Is any text cut off or overlapping? Can you still use the menu, forms and buttons?
- Zoom to 400 percent. Scroll down the whole page. Do you ever need to scroll sideways to read a line or reach a button? Note anything that does.
- At 400 percent, open the menu, fill in a form field, open any accordion or tab, and trigger any popup. Check that each can be used and closed.
- Reset zoom and apply a text spacing bookmarklet. Look for text clipped inside buttons, cards, badges and headers.
- Write down the template, the zoom level, what broke and a screenshot. Most problems repeat across every page using that template.
Ten minutes per template is enough for a first pass. If something looks fine at 400 percent but broken at 250, note that too; failures can appear between the two tested levels.
What usually breaks, and how to fix it
Fixed heights on text containers
A frequent cause of clipped text. A designer sets a card, banner or button to an exact height so everything lines up. Enlarge the text or increase spacing and it no longer fits, so it is cut off or spills over the next element. The fix is to replace height with min-height, or remove the height and use padding:
/* Before: clips when text grows */
.service-card { height: 320px; overflow: hidden; }
/* After: grows with its content */
.service-card { min-height: 320px; }Fixed widths that force sideways scrolling
Elements set to a pixel width wider than 320, such as a hero box at 600 pixels, an embedded form at 500 or a pricing comparison laid out as fixed columns, push the page wider than the viewport. Using max-width: 100%, percentage widths or flexible layouts that wrap usually fixes it. Long unbroken strings such as email addresses and URLs can also push the page out; overflow-wrap: anywhere helps there.
Wide tables
A price list or schedule with eight columns may need more room than 320 pixels, and that is permitted. What is not permitted is the whole page sliding sideways because of it. Give the table a parent box with horizontal overflow, so only that box moves, and check that a keyboard user can tab to the box and move it with the arrow keys. Our post on responsive data tables covers the markup.
Sticky headers, bars and floating buttons
A sticky header that takes 80 pixels at normal zoom can take half the visible screen at 400 percent. Add a sticky announcement bar, a cookie notice and a floating chat button, and there may be almost no room left for content. Options include letting the header scroll away at narrow widths, shrinking it, or dropping the sticky behavior below a certain width. This also matters for focus: a header that covers the element with keyboard focus runs into 2.4.11 Focus Not Obscured (Minimum).
Text in images
Banner images with the offer written into the picture do not reflow. They get blurry when zoomed and may be cropped at narrow widths. Put the words in real text over or beside the image.
Menus that do not switch to the mobile pattern
Some themes switch layouts based on the device rather than the window width, so a zoomed laptop keeps the full desktop menu, which then wraps over several lines or runs off the screen. A theme that responds to window width avoids this. If your theme gets this wrong, the guide to fixing layouts that break on small screens is a good starting point.
Font sizes set in fixed units
Browser zoom enlarges pixel-based text fine, but people who raise their browser’s default font size instead get nothing if everything is set in pixels. Using relative units such as rem for type respects both settings. For the reading side of type, see our notes on readable font sizes and spacing.
A note on blocking zoom on phones
Some themes include a viewport setting that disables pinch zoom on phones, usually to stop the layout “jumping”. It takes away the main way mobile users enlarge text, and although some mobile browsers now ignore it, you cannot rely on that. If you find user-scalable=no or a low maximum scale in your theme’s head markup, it should go. This is a one-line change with a large effect.
Where WCAG reflow fits in the wider picture
Zoom testing is one of the checks automated scanners do worst, because they cannot see an overlap or judge whether sideways scrolling is needed. They catch only part of these problems, so a person has to look. It also connects to other criteria, from contrast to focus to target size, all listed in the rest of WCAG 2.2 Level AA. If you want to understand the whole process of auditing, fixing and keeping a site in shape, our page on accessibility services for US businesses explains it.
Frequently asked questions
Does passing reflow mean my site works on phones?
Not completely. Reflow checks that content fits a narrow width without sideways scrolling, which overlaps a lot with phone layouts. Phones add their own issues, such as touch targets, orientation, screen reader gestures and pinch zoom. Treat the zoom test and a real phone test as two separate checks.
Is horizontal scrolling ever allowed?
Yes, for content that genuinely needs two dimensions, such as data tables, maps, diagrams and some interactive tools. The rest of the page should still reflow. A wide table can scroll inside its own container while the text around it wraps normally at 320 CSS pixels.
What is a text spacing bookmarklet?
It is a small saved bookmark that runs a snippet of code on the current page, increasing line height, letter spacing, word spacing and paragraph spacing to the values in 1.4.12. Several free versions exist. Click it on each template and look for text that gets cut off or overlaps.
Can a plugin fix reflow problems?
Rarely. Reflow failures come from how the theme, page builder layouts and custom code size and position things. The fix is usually CSS changes to widths, heights and sticky elements. A toolbar that enlarges text does not help, because it is the layout that fails when text grows, not the text itself.
Our WCAG audit zoom-tests your templates against 1.4.4, 1.4.10, 1.4.12 and the rest of Level AA, and includes screenshots of each failure at the zoom level where it happens. For a hands-on pass on its own, zoom and reflow checks by a tester cover the same ground across your key pages.
