Size containers in percentages, not fixed pixels
A container sized in percent takes its width from the space available, so when a reader enlarges the text the words reflow inside the window rather than running off the side of it. W3C attaches C24 to 1.4.8 Visual Presentation, which is Level AAA, and lists it as sufficient there in combination with the general technique of using a liquid layout. Percentages are the oldest way of building that, and the modern grid and flexbox techniques do the same job with more control. The failure they all avoid is the same one. A fixed pixel container cannot give ground, so something has to leave the viewport, and horizontal scrolling is the thing readers with low vision and readers on phones pay for.
How we find it in an audit
Fixed pixel widths on layout containers are an automated inventory across the stylesheets. Then we narrow the viewport to 320 CSS pixels and zoom to 400 percent and look for a horizontal scrollbar, because that is the state the reflow rule actually describes and it catches containers a code review would pass.
How affected users experience it
Horizontal scrolling to read a sentence is the specific thing this prevents. Zoomed to 400 percent, a fixed-width column means dragging left and right for every line, which is the reading equivalent of turning the page in the middle of each sentence. Sized in percent, the same content narrows and stacks, and the reader scrolls in one direction like everybody else.
Passes vs. fails
Passes
.sidebar { width: 30%; max-width: 20em; }
.content { width: 70%; }Fails
.sidebar { width: 300px; }
.content { width: 660px; }Other ways to satisfy this rule
21 guides on this site are filed under 1.4.8 Visual Presentation. W3C lists this one as sufficient for that rule only alongside G146, so the pair is what passes and neither half does on its own.
- C12sufficientSize text in percent so it scales
- C13sufficientUse named font sizes that respect user defaults
- C14sufficientSize text in em units, not pixels
- C19sufficientAlign text left or right, never justified
- C20sufficientCap line length with relative column widths
- C21sufficientGive paragraphs breathing room with line spacing
This guide is our interpretation of W3C technique C24: Using percentage values in CSS for container sizes. 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.