Let labels and inputs wrap on narrow screens
A label floated to a fixed width beside a fixed-width input is a two-column form that cannot become a one-column form. C38 uses width, max-width and flexbox so the pair sits side by side where there is room and stacks vertically where there is not. W3C lists it as sufficient for 1.4.10 Reflow, with the target stated as no horizontal scrollbar at a width equivalent to 320 CSS pixels. It is the one reflow technique W3C states with the width threshold alone, because a form is vertically scrolling content by assumption. A flex container with wrapping on, a flex-basis in em on the input, and a max-width of 100 percent will handle nearly every form on a site.
How we find it in an audit
We narrow to 320 CSS pixels and work through every form on the site, watching for inputs pushed off the right edge and labels squeezed into a two-character column. Fixed pixel widths on labels and inputs are the cause and they are an easy automated inventory, so the two checks together are quick.
How affected users experience it
A form that will not stack at high zoom leaves the label visible and the input off-screen, so somebody knows what is being asked and cannot see where to type it. Filling in a checkout that way means scrolling sideways for every single field, and a form is exactly the place where nobody has patience left.
Passes vs. fails
Passes
.field { display: flex; flex-wrap: wrap; gap: 0.25em 1em; }
.field input { flex: 1 1 14em; max-width: 100%; }Fails
label { float: left; width: 220px; }
input { width: 420px; }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
- G206sufficientOffer a layout without horizontal scrolling
- G224sufficientPreserve meaningful indentation when text reflows
- G225sufficientKeep horizontal carousels usable at 320 pixels
This guide is our interpretation of W3C technique C38: Using CSS width, max-width and flexbox to fit labels and inputs. 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.