Preserve meaningful indentation when text reflows
Some content means something by how it is indented. Nested lists, outlines, code. G224 says keep that structure legible when the page reflows to a narrow width, and W3C's method is breakpoint-adjusted indentation on nested levels rather than one fixed rule. Here is the part that changes findings. W3C accepts that where indentation is meaningful, some two-dimensional scrolling may be necessary, and the technique is about minimizing it rather than eliminating it. Its list test passes content where each nested level scrolls horizontally into view and reading within a level needs only vertical scrolling. The code test has three alternate passes, and one of them is that the indentation and line breaks are meaningful to the language, which lets a code sample that does not reflow at all pass on the grounds that its layout is essential. This is a sufficient technique for 1.4.10 Reflow at Level AA. A hanging indent on wrapped lines is a good pattern for code and it is our recommendation rather than W3C's.
How we find it in an audit
Our reviewers narrow the viewport and read the nested content. Deep list levels, outlines, and code blocks. The finding is content whose structure has become unreadable, not content that scrolls, since W3C allows the scrolling where the indentation carries meaning. Documentation sites get the code test applied rather than the general one.
How affected users experience it
Indentation is how a sighted reader sees which step belongs inside which. At high zoom, wrapped lines that restart at the left margin destroy that, and a code sample becomes a run of lines whose nesting has to be reconstructed from memory. Readers with cognitive disabilities lose the structure first. Keeping continuations visibly attached to their parent line keeps the shape of the content intact.
Passes vs. fails
Passes
pre { white-space: pre-wrap; } with a hanging indent on wrapped lines, so continuations stay visibly nested under the statement they belong to.Fails
A documentation site whose code blocks wrap with continuations at column 0, so at high zoom the sample's structure becomes guesswork.
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
Other ways to satisfy this rule
11 guides on this site are filed under 1.4.10 Reflow. 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.
- C31sufficientReflow content with flexbox at narrow widths
- C32sufficientStack columns with grid and media queries
- C33sufficientBreak long URLs so nothing scrolls sideways
- C38sufficientLet labels and inputs wrap on narrow screens
- G206sufficientOffer a layout without horizontal scrolling
- G225sufficientKeep horizontal carousels usable at 320 pixels
This guide is our interpretation of W3C technique G224: Accounting for meaningful text indentation and Reflow. 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.