• 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 

input.address-line { width: 240px; height: 32px; font-size: 16px; }
<!-- at 200% zoom the enlarged text no longer fits the fixed-height box and gets clipped from view -->

Why it matters

A subscriber updating their shipping address can't see the full street name they've typed, risking a misdelivered box.

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 fields in relative units (em/rem) so they grow along with the enlarged text instead of clipping it.

input.address-line { width: 15em; min-height: 2em; font-size: 1rem; }

Outcome

The subscriber sees their full street address inside the field and confirms it's correct before saving.

Who is affected

Low-vision users typing into form fields, who can't verify what they entered once it's clipped inside a fixed-size box.

Learn more

Related scenarios