WCAG 1.4.4 Resize Text

What it asks

Many people read the web with the text enlarged. The browser’s zoom does it, and so does the text size setting that scales only the text. This rule says that up to 200 percent, nothing may be lost. No text cut off at the edge of a box, no overlapping lines, no button whose label has vanished, no menu that can no longer be opened.

"Without assistive technology" means the browser’s own features have to be enough. A page that only works at 200 percent with a screen magnifier does not pass. The page also has to let the browser do its job: a viewport meta tag that disables pinch zoom, or caps it below 2, stops people on phones enlarging the page at all.

Two things are exempt: captions on video, and pictures of text, which 1.4.5 Images of Text discourages anyway. Horizontal scrolling to read a line of text is treated by the W3C as a loss of functionality, and 1.4.10 Reflow, which goes to 400 percent, covers that in more detail.

There are two ways to enlarge text, and products often pass one and fail the other. Page zoom scales everything, so layouts usually hold. Text-only zoom scales the words inside boxes that stay the same size, which is where fixed heights and overflow: hidden start clipping. A good test does both.

Its official name is success criterion 1.4.4 Resize Text, at Level AA. It was added in WCAG 2.2, under guideline 1.4 Distinguishable and the principle Perceivable. The W3C’s normative text says, in part:

“Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.”

From WCAG 2.2, W3C. Full explanation: Understanding 1.4.4 Resize Text.

Who it helps

People with low vision who do not use a screen magnifier, which is most of them. Enlarging the text in the browser is the first thing they do on every site.

Older people, people reading on a small screen held at a distance, and anyone whose glasses are in the other room.

What passes and what fails

These pass

• A page whose containers grow with their text, so that at 200 percent every paragraph, label and button is still whole.
• A navigation bar that wraps onto two lines, or collapses into a menu button that opens, when the text gets bigger.
• A viewport meta tag of width=device-width, initial-scale=1, which leaves zoom alone.
• A card whose height is set by its content rather than a fixed pixel value.

These fail

• A viewport meta tag with user-scalable=no, or maximum-scale=1, which stops people on phones zooming at all.
• Buttons with a fixed height and overflow: hidden, so the label is cut in half at 200 percent.
• A fixed-height hero banner whose text runs out of the bottom and under the next section.
• A navigation bar whose items overlap each other, or disappear behind a logo, when the text grows.
• A table cell with a fixed width where words are clipped rather than wrapped.
• Text in a sidebar that overlaps the main content when enlarged.

How to test it by hand

1. Set the browser zoom to 200 percent. Read every part of the page. Look for text cut off at the edge of a box, words on top of each other and text running past its container.
2. Try every control at that size: open menus, expand sections, submit a form. Note anything that no longer works.
3. Reset the zoom. Now use the browser’s text-only size setting, where it has one, and set it to 200 percent. Repeat both checks. Fixed-height boxes usually fail here first.
4. Check the page’s viewport meta tag in the source for user-scalable=no or a maximum-scale below 2.
5. On a phone, try to pinch-zoom the page.
6. Note every element that clipped, overlapped or stopped working, and at which kind of zoom.

What automated testing can decide

What a machine can decide

The viewport meta tag can be read from the source. Whether text is cut off or drawn on top of other text at 200 percent is something automated testing can see: a line that no longer fits its box, or that overlaps its neighbour, has a clear answer.

What it cannot

Whether every function still works is harder. A menu that collapses into a button at the larger size has not lost anything if the button opens it, and a tool has to try the button to know. A control that slides under a fixed header, or off the edge of a box with hidden overflow, may still be in the page and still be unusable. Deciding what counts as lost often takes a person who knows what the page is for.

How Dreven handles it

Dreven looks at your pages enlarged to 200 percent and shows you any text or control that is lost, cut off or overlapped at that size, with the element, the page and a picture at both sizes.

A reviewer decides each result, and the report says which pages were tested and how each result was decided.

No automated check makes a site conform. In Dreven, a person reviews the results and signs the report.

Related criteria

• 1.4.10 Reflow (Level AA). Reflow goes further: at 400 percent, no sideways scrolling.
• 1.4.12 Text Spacing (Level AA). Wider spacing has to survive without loss too.
• 1.4.5 Images of Text (Level AA). Pictures of text do not scale well, which is one reason to avoid them.
• 1.4.8 . The AAA rule on presenting blocks of text, including resizing to 200 percent without sideways scrolling.

Questions people ask

All WCAG 2.2 criteria, in plain words