Reflow, Zoom and Magnification
Accessibility and Responsive Web Design are BFFs. That’s because the same CSS that turns a multi-column layout into a single column for mobile viewports can be targeted when you zoom in to 200% or larger without horizontal scrolling.
There is a WCAG criterion for this kind of thing, called Reflow (opens in a new tab). You could think of it as the "mobile & accessibility criterion". There are a couple of exceptions that allow content to remain wider than a mobile viewport, such as data tables, canvas drawing apps, and more.
Designing for reflow
Here are some techniques for designing for reflow:
- Grouping items so they can reflow into a single column
- Adjustable font size, margins/padding
- Using a single column for form inputs and labels to minimize horizontal scrolling at any size
Web tools to test reflow
You’ve got a pretty simple tool for testing reflow on a desktop browser: the built-in zoom function (Cmd+ on a Mac, Ctrl+ on Windows).
Chrome DevTools includes a pretty fabulous Device Toolbar (opens in a new tab) button that you can toggle to test out various viewport sizes without having to fire up an actual device. Although, testing on an actual mobile device like an iPhone or Android device is always a good idea.
Tools to test zoom and magnification
Mac OS (opens in a new tab) and iOS (opens in a new tab) also have platform Zoom settings you can enable, as well as magnification.
Windows has a Magnifier (opens in a new tab) feature.
Android includes a setting for Magnification and Zoom (opens in a new tab).
There are also third-party tools for magnification, such as ZoomText (opens in a new tab).