Let form fields grow when text resizes
A form field sized in pixels holds the same number of pixels whatever the text does, so enlarged text scrolls inside a box it has outgrown. C17 says to size text-based controls in units that move with the font. W3C lists it as advisory for 1.4.4 Resize Text and for nothing else, which means it improves a form and does not on its own satisfy the rule. If you need the sufficient route across the same ground, that is C28, which sizes text containers in em and does include form controls. W3C scopes this one to text-based controls, meaning text inputs, textareas and buttons, and the aim it states is worth keeping in mind while you build. People need to be able to read back what they have just typed, at the size they need it.
How we find it in an audit
We set the browser's text size up and work through every form. Type a full address into the field, type a long name, and look for the text that has gone under an edge. Fixed heights on inputs, fixed widths on buttons and a hidden overflow are the three declarations that cause it, and all three are quick to inventory.
How affected users experience it
This lands on people with low vision, and it lands at the worst moment. They fill in a field at 200 percent text size, the box only shows six characters of what they typed, and there is no way to check the whole value before submitting. Checking your own bank details before you press send is not an optional part of the task.
Passes vs. fails
Passes
input { width: 100%; max-width: 22em; font-size: 1em; padding: 0.4em; }Fails
input { width: 180px; height: 22px; font-size: 12px; }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 lists this one as advisory for that rule rather than sufficient, which means it helps real readers without being accepted as evidence you conformed.
- 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 C17: Scaling form elements which contain text. 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.