Will customer text remain usable when readers increase its spacing?

The requirement is resilience to a reader’s settings

A business may choose attractive default typography, but a reader may need more space between lines or characters to follow a page comfortably. WCAG 2.2 success criterion 1.4.12 concerns what happens when that reader overrides authored text spacing in markup-based content. It does not order every site to display its text at the test values by default, and it does not require a built-in spacing switch. The author’s responsibility is to keep content and functionality available when the specified spacing values are applied. That distinction matters: a screenshot of the original design cannot show whether a customer can still read the delivery terms, choose a variation, or use the final action after an override.

The W3C test values are a 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 criterion applies these together, changing no other style property. Those numbers are test conditions, not a marketing claim that every reader wants those settings. If a team alters the font size or viewport at the same moment, it has changed the experiment and may miss the particular spacing defect. Record the settings and the browser used so a developer can reproduce a reported failure.

The standard recognises that a language or script may not use every one of these spacing properties in its written form. That exception matters on a bilingual Hong Kong site. English has words separated by spaces; Chinese text generally does not use spaces between words in the same way, so a word-spacing override may have little effect on Chinese copy. It would be wrong to declare the whole Chinese page exempt. Line height, paragraph spacing, and character spacing can still change its layout. Test the actual script, punctuation, embedded Latin product names, prices, and mixed-language labels. Judge whether any meaningful content or control disappears, rather than whether the text still resembles the designer’s preferred arrangement.

Choose the places where text carries a decision

Begin with a small, deliberate page sample. Include a product card, a detail page, a form with helper text and an error, a checkout summary, and a confirmation message if those are part of the business journey. Add the site header, navigation, sticky bars, dialogs, and mobile menus because short labels often sit inside rigid containers. Replace placeholder copy with realistic long English and Traditional Chinese text before testing. If a page uses dynamic content, test a short and a long value: a product name, an address, or an order status can expand after data arrives. A tidy static template does not prove the real state is safe.

Use a tool or user stylesheet to apply the four specified values at normal browser zoom, as the W3C C36 procedure describes. Then examine each page in more than one responsive layout. Read all content rather than looking only for a dramatic overflow stripe: a price qualifier can be clipped without shifting its parent box, and an error explanation can overlap a button while the form still appears complete. Operate the page with a keyboard and touch where relevant. If the customer cannot reach the control or tell what it does, functionality has been lost even when the text is technically present in the document. Capture the exact component and state, not only a page-wide pass or fail.

Do not treat an ellipsis as an automatic failure or an automatic cure. W3C explains that a truncated label may remain acceptable if the full content is still available through a workable mechanism, such as revealing it on focus or activation, or on the destination page for a link. If spacing creates a new ellipsis and the important phrase is nowhere available, the content is lost. For a control, confirm its accessible name and visible context still communicate the action. A button reduced from 'Continue to payment' to an unexplained 'Continue…' may be ambiguous in a multi-step flow even if a screen reader has a longer name. Decide based on the customer’s actual information need.

Include content that appears only after interaction. A shipping condition might be inside an expanded disclosure, and an error might appear only after an invalid submission. Apply the spacing override before opening those states and keep it applied while operating them. If the text fits only because the test tool was switched off after the first screenshot, the customer has not gained a usable page. Save the particular state as a reproducible example so a later design change can be checked against the same decision point.

Repair the container, then retest the state

W3C failure technique F104 describes common clipping and overlap when text is placed in a box that cannot expand. Inspect fixed heights, hidden overflow, absolute positioning, and decorative borders that were sized around one sentence. Where possible, let a card or row grow with its text; allow wrapping and sensible breaks, and leave enough space for labels and error messages. A sticky panel may need to become part of normal document flow at a narrow width. Avoid solving the test by removing essential words or shortening a legal or commercial qualifier. The repair should preserve the meaning that the customer needs to make the decision.

Consider a delivery-choice card with a fixed height. Its default English line says that pickup is available, and a smaller line explains the pickup window. After the reader increases line and paragraph spacing, the second line is hidden behind the card boundary. A customer might select pickup without seeing the time condition. A useful fix is to make the card height content-driven and place the choice control after the explanatory text in a predictable order. Reapply the spacing values, then try the Chinese version and a longer location name. Confirm that selecting the option still works and that the complete condition is visible before the choice.

Retest at the same spacing settings after the code change and note whether the failure disappeared, moved, or exposed another fixed box. Then repeat a separate zoom and reflow check if that is part of the site’s accessibility programme; spacing and zoom are related practical concerns but are not interchangeable tests. Keep a small regression fixture with representative bilingual long strings and error states. When a content editor later lengthens a delivery condition or a developer changes a button style, the fixture gives the team a realistic page state to inspect. The release decision should be based on visible, usable information, not a screenshot similarity score.

Prioritise components by the consequence of missing text. An obscured decorative caption may be inconvenient, while a clipped delivery restriction, payment label, or validation instruction can change a decision or prevent completion. Keep a short defect record with the exact wording, language, viewport, applied spacing values, and a description of what becomes invisible. Then assign the repair to the component that controls size and overflow. If the same card pattern appears across dozens of pages, repair the shared pattern and verify a few real instances with different lengths. This gives a small business a practical sequence without pretending that one successful page proves the whole site safe.

An acceptance example can be written without a screenshot: 'With the four WCAG spacing overrides applied at normal zoom, the delivery option's complete time condition is visible before selection, the radio control is operable, and the same is true in the Chinese edition.' Such a statement names the customer outcome and the test condition. It also gives future editors a reason not to force an important qualifier into a one-line label. If the layout cannot accommodate the existing design, revise the component hierarchy or move the explanation to a full-width line, then test again. Do not rely on a hover-only tooltip to rescue clipped text, because touch users may never reveal it.