Do not pin form control text to a fixed size
The labels grow when a reader enlarges text and the answers do not, because the control's font size is pinned in the stylesheet. F80 is the failure technique for it, so a page matching it holds a defect rather than a technique. The unit is not the point, which is where most fixes go wrong. Points, picas, millimeters and inches freeze text exactly the way pixels do, so a stylesheet audited for px can sail through and still fail on pt. And the controls named here are text inputs, textareas and buttons. The button usually breaks first, because its label lives inside a box the design already sized.
How we find it in an audit
The test starts with typing, which is the step most checks skip. We enter real text into the controls first, take the page to 200% after that, then check that what we typed grew along with everything around it. Buttons get the same treatment, since a label overflowing its box is the usual first casualty. A stylesheet sweep for absolute units on form elements runs beside it and picks up the rest, whatever unit did the pinning.
How affected users experience it
A low-vision reader sets text larger because that is the size they can read. The question above the field arrives at that size and the answer they typed does not, so they end up proofreading their own bank details at the size that made them enlarge the page to begin with. On a button it goes further, because the word can be cut in half by a box that never grew, and pressing something you cannot read is how the wrong order gets placed.
Passes vs. fails
Passes
input, button { font-size: 1em; width: 100%; max-width: 20em; }Fails
input, button { font-size: 12pt; width: 180px; }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
The other techniques filed under this rule
15 guides on this site are filed under 1.4.4 Resize Text. W3C documents this one as a failure of that rule, so it describes a way the rule gets broken rather than a way to pass 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
- G146sufficientUse liquid layouts that fit any window
This guide is our interpretation of W3C technique F80: Failure of Success Criterion 1.4.4 when text-based form controls do not resize when visually rendered text is resized up to 200%. 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.