- Success Criterion 1.4.4
- Conformance level AA
- W3C reference F80
Form Fields That Don’t Grow When Text Is Enlarged
1.4.4 — Resize Text
Scenario
Setting
A subscription box service's account settings
What’s wrong
Form fields don't grow when text is enlarged to 200% — what the user types gets cut off inside the box.
Example
Here's a real case from a subscription box service's account settings: form fields don't grow when text is enlarged to 200% — what the user types gets cut off inside the box.
Why it matters
Low-vision people who enlarge text instead of using a screen reader. Here, on a subscription box service's account settings, the result is they can't perceive part of the content because of how it's displayed.
How to test
Set browser zoom to 200% and check form fields specifically: if the input box itself doesn't grow, typed text gets clipped inside it.
How to fix
Size form controls in relative units so they grow with 200% text.
Outcome
After the fix, the same visitor to a subscription box service's account settings can now read the text clearly against its background.
Who is affected
Low-vision people who enlarge text instead of using a screen reader.
Learn more
- Understanding Understanding document (opens in a new tab)
- Technique Related technique (opens in a new tab)
Related scenarios
- Text and Controls That Get Cut Off at 200% Zoom
- Font Size Set in Viewport Units That Ignores Browser Zoom
- Viewport Meta Tag That Disables Pinch-to-Zoom on Mobile
- Fixed-Height Containers That Clip Content at 200% Zoom
- Button or Nav Text That Overflows Its Fixed-Size Container
- Sticky Header That Grows Large Enough to Cover Content