Stop enlarged text clipping in fixed containers
This technique covers one specific collision. Text size goes up, container width does not, and something has to give. G179 says the content must not be lost, and W3C accepts three ways of achieving that. Define the block wide enough that enlarged text still fits. Let the text wrap so the block grows taller. Or give the block a scrollbar when the resized text no longer fits, which is a passing implementation in W3C's own example and the route reviewers most often mark wrong. This is a sufficient technique for 1.4.4 Resize Text at Level AA, and it applies to any technology that reflows text when windows are resized. What fails is a fixed height with overflow hidden, because that removes the words silently and nothing on screen shows that anything is missing.
How we find it in an audit
Our reviewers take text to 200 percent and go looking for content that has quietly disappeared. Cards, tiles, table cells and navigation are the usual sites, and the tell is a sentence that stops mid-thought. Where a block scrolls instead of growing, we check that the scrolling actually works with a keyboard, since a scroll container nobody can reach is not one of the three routes.
How affected users experience it
Clipped text is the cruelest version of this failure, because it leaves no trace. A reader at 200 percent sees a card that looks finished and never learns that the price, the deadline, or the second half of the instruction was cut off below the fold of a fixed-height box. They are not aware of missing anything. They just act on incomplete information.
Passes vs. fails
Passes
With .card { min-height: 120px; } and no overflow clipping, enlarged text wraps and each card grows taller, keeping every word readable.Fails
With .card { height: 120px; overflow: hidden; }, at 200 percent text the third and fourth lines of every card are cut off invisibly.How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Meta viewport allows for zoomA tool can check this
- Zoomed text node is not clipped with CSS overflowA tool finds candidates, you decide
Other ways to satisfy this rule
15 guides on this site are filed under 1.4.4 Resize Text. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- C12sufficientSize text in percent so it scales
- C13sufficientUse named font sizes that respect user defaults
- C14sufficientSize text in em units, not pixels
- C28sufficientSize text containers in em units
- G142sufficientBuild with technologies whose browsers support zoom
- G146sufficientUse liquid layouts that fit any window
This guide is our interpretation of W3C technique G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.