- Success Criterion 1.4.4
- Conformance level AA
- W3C reference F94
Font Size Set in Viewport Units That Ignores Browser Zoom
1.4.4 — Resize Text
Scenario
Setting
A fitness app's workout tracker
What’s wrong
Font size is set in viewport (vw) units, so browser zoom / text-size settings don't enlarge the text at all.
Example
On a fitness app's workout tracker: font size is set in viewport (vw) units, so browser zoom / text-size settings don't enlarge the text at all.
Why it matters
Low-vision people who enlarge text instead of using a screen reader. On a fitness app's workout tracker specifically, they can't perceive the control's boundary or state.
How to test
Inspect font-size values in DevTools: if set in vw (viewport width) units, browser/OS text-size settings won't enlarge them at all.
How to fix
Size text in rem/em/%, not viewport units, so user zoom and text-size settings work.
Outcome
Fixed, a visitor to a fitness app's workout tracker can see the control's boundary and current state.
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
- Form Fields That Don’t Grow When Text Is Enlarged
- 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