WCAG 1.4.12 Text Spacing

What it asks

Some people read far more easily with more air around the text. Browser extensions and user stylesheets let them set it. This rule says the page has to survive a specific set of values, applied all at once and with nothing else changed: line height of at least 1.5 times the font size, space after paragraphs of at least 2 times the font size, letter spacing of at least 0.12 times the font size, and word spacing of at least 0.16 times the font size.

The page is not required to use those values. The W3C says so in a note. The requirement is that when a reader applies them, no content and no function is lost. Text grows taller and wider under the override, so a box with a fixed height clips it, a button with hidden overflow loses its label, and two columns that just fitted now overlap.

The rule covers content in markup languages that support these properties, which for web pages means HTML and CSS. One exception: languages and scripts that do not use one of these properties, such as scripts without spaces between words, can conform using only the properties they have.

A page that locks spacing with !important in an inline style is the one case a reader’s override cannot beat, which is why that pattern is singled out in testing. Everywhere else, the test is simply to apply the values and look.

Its official name is success criterion 1.4.12 Text Spacing, 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:

“In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:”

From WCAG 2.2, W3C. Full explanation: Understanding 1.4.12 Text Spacing.

Who it helps

People with dyslexia, for whom letters that crowd each other blur together, and who often read far faster with wider letter and line spacing.

People with low vision, who use spacing as well as size, and people with some cognitive disabilities who find dense text hard to track. The settings are theirs; the page only has to keep working.

What passes and what fails

These pass

• Paragraphs and cards whose height is set by their content, so they grow as the text does.
• A button whose label wraps onto a second line under the override, with the button growing to fit.
• A navigation bar whose items wrap or collapse into a menu when they no longer fit on one line.
• A page written in a script that has no word spacing, tested with the other three values.

These fail

• A card with a fixed height and overflow: hidden that cuts off the last lines of its text under the override.
• A single-line button with hidden overflow whose label is clipped when letter spacing widens it.
• Navigation labels that are truncated with an ellipsis at the wider spacing, so the person cannot read them.
• A design system that sets line-height with !important in inline styles, so the reader’s override has no effect.
• Two columns of text that overlap each other once the lines get taller.
• A tooltip or label positioned by pixel count that now covers the field it describes.

How to test it by hand

1. Apply the four values to the page at once. A bookmarklet or a user stylesheet works: line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; on every element, and margin-bottom: 2em !important on paragraphs.
2. Scroll through the whole page. Look for text cut off at the bottom or right of a box, labels replaced by an ellipsis, and lines drawn on top of each other.
3. Try every control: open menus, expand sections, submit a form. Note anything that no longer works.
4. Check the result against the page without the override. Anything readable before and not now is a failure.
5. Search the source for !important on line-height, letter-spacing or word-spacing in inline styles, which can stop the override applying at all.
6. Note every element that clipped, truncated, overlapped or stopped working.

What automated testing can decide

What a machine can decide

This criterion is unusually testable, because the W3C states the exact values to apply. A tool can apply them to a page and see what happens. Text that is clipped by its box, cut short with an ellipsis or drawn over its neighbour with the wider spacing, and was not before, has a clear answer. Inline spacing locked with !important can be read from the page and checked against the four values.

What it cannot

Whether something that moved still works is harder. An element that was already overlapping by design is not a new defect, an overlay that sits above the page on purpose is not one either, and a lost label matters more on a form than on a footer. Whether a control that moved is still usable can take a person to say.

How Dreven handles it

Dreven looks at your pages with wider text spacing and shows you any text or control that is clipped, cut short or overlapped, with the element and a picture of it before and after.

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.4 Resize Text (Level AA). Text must resize to 200 percent without loss. The same fixed-height boxes fail both.
• 1.4.10 Reflow (Level AA). The layout must also reflow at 320 pixels wide.
• 1.4.8 . The AAA rule on presenting blocks of text, with its own spacing values.
• 1.4.5 Images of Text (Level AA). Pictures of text cannot be respaced at all.

Questions people ask

All WCAG 2.2 criteria, in plain words