- Success Criterion 1.4.4
- Conformance level AA
Button or Nav Text That Overflows Its Fixed-Size Container
1.4.4 — Resize Text
Scenario
Setting
A podcast app's episode list
What’s wrong
Text in fixed-size buttons/nav wrapping out of view or overlapping icons.
Example
.play-btn { width: 80px; height: 32px; white-space: nowrap; }
<!-- "Play Episode 12" overflows and clips outside the button at 200% zoom --> Why it matters
A listener zoomed in to read small text can't tell which episode a button plays once its label spills outside the button's edges.
How to test
Set zoom to 200% and inspect fixed-size buttons/nav items: text should wrap or the container should grow — if it overflows outside the visible button, it fails.
How to fix
Let buttons grow with their content instead of fixing both width and height; wrap or scroll rather than clip.
.play-btn { min-width: 80px; height: auto; padding: 6px 12px; white-space: normal; } Outcome
The listener reads each episode button's full label clearly and taps the right one the first time.
Who is affected
Low-vision users, who lose the ability to distinguish between similarly labeled episode buttons once the text clips.
Learn more
- Understanding Understanding document (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
- 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
- Sticky Header That Grows Large Enough to Cover Content