Form text small enough to make the phone zoom
- Forbidden
- An input, select or textarea whose text is below 16px — including
operator's 14px--text-body, and--text-captionin every mode - Instead
- At least 16px on touch screens. To keep a denser size on desktop, raise it only where it matters:
@media (pointer: coarse) { input, select, textarea { font-size: max(16px, var(--text-body)); } }
What this rule looks like
Why this rule
iOS Safari zooms the whole page when a field whose text is below 16px takes focus, and it does not zoom back out when the field loses it. The reader is left with a form wider than the screen, scrolling sideways to find the next field (D-115). Setting maximum-scale=1 on the viewport to stop it is not the fix. That disables pinch zoom for everyone, which is an accessibility failure in its own right.
- Kind
- Rule
- Section
- Things to avoid
- Group
- Forms
- Bucket
- mechanical
- Severity
- warning
- Detector
input-zoom- Since
- v0.10.0