What reflow on zoom means

How it works

Many people with low vision zoom pages a long way in the browser. At 400 % zoom, a screen 1280 pixels wide leaves room for 320 CSS pixels, about as much as a small phone. A page that adapts then wraps into one column, and you read straight down.

If it doesn't adapt, the content sticks out on the right. You then have to scroll back and forth for every line and keep losing your place.

WCAG 2.2 requires in success criterion 1.4.10 that content stays readable and usable at 320 CSS pixels wide without horizontal scrolling. Content that needs a two-dimensional layout is exempt, such as maps, diagrams and data tables. bytereport loads the page in the browser at 320 pixels wide and checks whether it gets wider.

What matters

• A responsive layout with a viewport setting. Without the viewport tag a mobile browser assumes a wide desktop page. The layout adapts through flexible widths and media queries.
• No fixed widths. width: 1200px or a large min-width on a container forces sideways scrolling. max-width instead of width leaves room to shrink.
• Limit images and videos. Without a limit they keep their full width.
• Break long words. Long URLs, e-mail addresses and long compound words burst narrow columns.
• Tables and code in their own box. Wide tables may scroll inside an area of their own, but the page itself must not.
• Don't hide it. overflow-x: hidden on the body removes the scrollbar but cuts the content off, which is then not reachable at all.

img, video { max-width: 100%; height: auto; }
body { overflow-wrap: break-word; }
.table-wrap { overflow-x: auto; }

How to set it up

The layout comes from the theme. Whoever maintains it looks for the element that is wider than the screen: in the browser's developer tools, set the width to 320 pixels and scroll right until you see what sticks out. Often it is a single block, such as a table from the editor, an embedded widget or an image with a fixed width. Content from the CMS, such as wide tables, goes into a scrollable block there, or is split up.