Do not block the browser's natural text reflow
Browsers reflow text on their own. G204 is about not stopping them. W3C's prescription is direct, which is to define the widths of text block containers in percentages, and it notes that HTML reflows automatically as long as the author avoids absolute measurements such as pixels or points. Fixed widths, nowrap declarations and absolute positioning are the usual ways that gets broken. W3C lists this as a sufficient technique for 1.4.8 Visual Presentation, at Level AAA. Its own test is a quarter-screen-width check, narrowing the window to a quarter of the screen and confirming no line of text needs horizontal scrolling to read. That is a gentler test than the Level AA reflow rule, which works to 320 CSS pixels at 400 percent zoom, and reflow has its own technique set of CSS-specific answers.
How we find it in an audit
Our reviewers narrow the window and watch the text. A horizontal scrollbar on the page as a whole is the signal, and the cause is usually one fixed-width container rather than the layout in general. We check for nowrap on long strings too, since a single unbreakable line forces the whole page sideways.
How affected users experience it
Someone reading at high magnification sees a narrow window onto a wide page. When the text does not reflow, every line means scrolling right to finish it and left to start the next one, and that is where reading stops being reading. People with cognitive disabilities lose the thread in the same movement. Percentage widths keep the line inside the viewport and the problem disappears.
Passes vs. fails
Passes
With .article { max-width: 60em; width: 100%; }, the text rewraps cleanly at any width down to 320 CSS pixels.Fails
With .article { width: 960px; }, at high zoom every single line of the story needs horizontal scrolling to finish.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 on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- 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 G204: Not interfering with the user agent's reflow of text as the viewing window is narrowed. 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.