How can I make a responsive layout work at high zoom?
Quick answer
Test each representative page at 400% zoom, or set the effective viewport to 320 CSS pixels. In a vertically scrolling layout, check that information and controls remain available, text reflows, and content does not overlap, get clipped, or require two-dimensional scrolling. WCAG 2.1’s Reflow guidance allows exceptions for content whose use or meaning inherently requires two-dimensional presentation, such as some data layouts. [S1]
The question, the details, the next step.
What should I check first? I can zoom in on a few pages, but I’m not sure what counts as a useful test.
Start with the narrow layout the page must handle, not just with whether the text looks larger. For vertically scrolling content, WCAG 2.1 Success Criterion 1.4.10 describes presentation at a width equivalent to 320 CSS pixels without loss of information or functionality or two-dimensional scrolling, except where two-dimensional presentation is essential to the content’s use or meaning. The guidance connects this width to a 1280 CSS-pixel starting viewport at 400% zoom. [S1]
Test at 400% zoom in the browser, or use a responsive-testing setup to make the effective viewport 320 CSS pixels. Those are ways to reach the relevant test condition; don’t assume that a browser’s zoom percentage always means the same thing as resizing its window. Check the resulting page, not just the settings.
Which pages and parts of the layout should I test?
Choose a small set of page types that exercise different layouts: for example, an article, a form, a page with cards, and a page with a wide data display. These are planning examples, not a required list. Include long headings, lengthy words or labels, error messages if the page has them, and controls near the edge of the layout. If a page has menus or expandable sections, open them and check their content and controls too.
At the narrow effective width, go through the page from top to bottom. Check whether text wraps instead of being cut off, controls remain visible and usable, and elements don’t obscure one another. Try the page’s ordinary interactions, such as opening a menu or moving through a form. A page can appear to fit while a hidden panel or expanded state still has a layout problem.
How do I decide whether horizontal scrolling is a bug or an exception?
Ask whether understanding or using that particular content inherently depends on seeing information in two dimensions. WCAG’s Reflow guidance recognizes exceptions for parts whose use or meaning requires a two-dimensional layout; some data presentations can fall into that category. It does not establish that every table, card row, image, or wide section qualifies. [S1]
For ordinary reading content, controls, and page structure, check for avoidable sideways scrolling, clipping, and overlap. For content that genuinely needs two-dimensional presentation, record exactly which part needs it and why, then check the rest of the page separately. Don’t use a wide element as a reason to accept lost information or inaccessible controls elsewhere.
Can you give me a repeatable test record so I can fix and recheck problems?
Use the same record for each representative page and retest after a change. For example, a hypothetical article-page entry could read:
“Page type: article. Test condition: effective width 320 CSS pixels. Finding: a long heading overlaps the nearby control. Scope: heading area. Retest: pending.”
Treat that as a placeholder example, not a finding about your site. Keep the issue specific: note the page state, the affected content, and whether information or a control became unavailable. After a fix, repeat the same zoom or viewport test and the same interaction. The guidance defines the reflow condition; this record is a practical way to organize your own observations, not a certification or proof that every accessibility requirement has been met. [S1]
A practical checklist
Select representative page types, including any page with a wide data presentation.
Set browser zoom to 400% or make the effective viewport 320 CSS pixels.
Scan the page for clipped text, overlapping content, and unnecessary sideways scrolling.
Open menus, expandable content, and form states; check that their controls remain available.
Record each issue by page, state, location, and effect on information or functionality.
Retest the same condition and interaction after making a change.
A few more useful answers
Do I have to use browser zoom rather than resizing the viewport?
No. The Reflow guidance describes checking by enlarging the page or narrowing the effective viewport to the relevant width. Use a method that lets you verify the 320 CSS-pixel condition. [S1]
Does any table qualify for the two-dimensional-layout exception?
No blanket exception follows from the fact that something is a table. The guidance allows exceptions when two-dimensional presentation is required by the content’s use or meaning; assess the specific content and keep the rest of the page in scope. [S1]
Is passing this zoom test enough to establish that a page is accessible?
No. This test addresses reflow at a particular effective width. The cited guidance does not establish that a page meets every accessibility requirement.
Sources
References used for this guide.
- [S1] Understanding WCAG 2.1: Reflow w3.org · Checked