Provide working on-page text-size controls
Browsers can resize text. Plenty of people do not know it. G178 puts the controls on the page, where they are impossible to miss. W3C names the audience precisely. People with low vision who do not use magnifying software and may not know their browser can do this. Older readers meeting age-related vision loss after a lifetime away from computers. Some people with cognitive disabilities. It is also a route for legacy code where scalable fonts are not available. This is a sufficient technique for 1.4.4 Resize Text at Level AA, and W3C's test is stricter than the button. Starting from a viewport of at least 1024 by 768, text has to reach 200 percent with nothing lost. Nothing clipped, no boxes overlapping, no controls obscured or cut off from their labels. It also has to come back down again. W3C adds that the control itself should be prominent, in larger text, at high contrast.
How we find it in an audit
Our reviewers press the control to its largest setting and then read the whole page. The usual half-fix enlarges paragraphs and leaves navigation, buttons and form labels where they were. So we check every kind of text separately. Then we go back to the default and check it returns cleanly.
How affected users experience it
Somebody who has never changed a browser setting still knows what an A+ button does. That is the entire value of this technique, and it is why a broken one is worse than none. When the button enlarges the article and leaves the menu at 12 pixels, the reader has been told the site can help them and then shown that it cannot.
Passes vs. fails
Passes
Three size steps up to 200 percent scale every piece of text, body, navigation, buttons and form fields alike, and layouts reflow so nothing clips.
Fails
The A+ button enlarges paragraphs only, so at the largest setting the navigation is still 12px and headings overlap the text below them.
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 G178: Providing controls on the web page that allow users to incrementally change the size of all text on the page up to 200 percent. 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.