Use liquid layouts that fit any window
A liquid layout defines its regions in units that scale with text, and positions them so they wrap onto new rows the way words wrap in a paragraph. The exact arrangement changes with the window. The relationships between elements and the reading order do not. G146 is that strategy, and its purpose is to present content without forcing horizontal scrolling. W3C lists it as sufficient for 1.4.4 Resize Text at Level AA, on the condition that it is used for resizing the containers that hold text, and it is sufficient again at the Level AAA visual presentation rule. Keep the numbers straight when you test. 1.4.4 asks for 200 percent. The separate reflow rule works to a 400 percent zoom equivalence, and W3C's technique set for reflow is a CSS-specific list rather than this general strategy.
How we find it in an audit
Our reviewers resize the window down through the common breakpoints and take text up to 200 percent, watching for a horizontal scrollbar on the page as a whole. Then we read what survived. Content clipped by a fixed height, columns that overlap, and controls pushed off the edge are the usual three, and all of them are invisible until somebody actually looks.
How affected users experience it
Someone using screen magnification at high power sees a small window onto a large page. If that page will not reflow, every line means scrolling right to finish it and left to start the next one, which is where reading turns into work. A liquid layout keeps the line inside the viewport, so the sideways scrolling stops and the reading resumes.
Passes vs. fails
Passes
Containers use percentages and flexible wrapping, so the same content reflows into fewer, narrower columns as the window shrinks.
Fails
The page is a fixed 1200px arrangement of pixel-positioned columns, and smaller windows cut content off behind a horizontal scrollbar.
How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Meta viewport allows for zoomA tool can check this
- Zoomed text node is not clipped with CSS overflowA tool finds candidates, you decide
Other ways to satisfy this rule
15 guides on this site are filed under 1.4.4 Resize Text. W3C lists this one as sufficient for that rule when used for techniques for text container resizing, so the condition is part of the test rather than a footnote to it.
- C12sufficientSize text in percent so it scales
- C13sufficientUse named font sizes that respect user defaults
- C14sufficientSize text in em units, not pixels
- C28sufficientSize text containers in em units
- G142sufficientBuild with technologies whose browsers support zoom
- G178sufficientProvide working on-page text-size controls
This guide is our interpretation of W3C technique G146: Using liquid layout. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.