A news site's headline cards clip text when readers apply a text-spacing override; what does WCAG 1.4.12 require, and how do you fix it system-wide?

## What the criterion says WCAG 2.2 **Success Criterion 1.4.12 Text Spacing** (Level AA) applies to content built with markup languages that support these text style properties. It requires that **no loss of content or functionality** occurs when a user sets all four of the following, and changes no other style property: | Property | Minimum the user may set | |---|---| | Line height (line spacing) | 1.5 times the font size | | Spacing following paragraphs | 2 times the font size | | Letter spacing (tracking) | 0.12 times the font size | | Word spacing | 0.16 times the font size | It serves readers with low vision, who need more space between lines, words and letters to read at all, and readers with dyslexia, who increase spacing to read faster. They apply it with a user style sheet, a browser extension, a bookmarklet or an application. ## What it does not say - **Authors need not use these values.** Note 1 is explicit: the requirement is that content survives the override, not that it is authored at 1.5 line height. - **The site need not provide the controls.** The Understanding document says the criterion does not require content to implement its own spacing mechanism; the reader brings one. - **The values are a floor, not a ceiling.** Authors are encouraged to let spacing go further without breaking. - **Font size stays the same.** Changing no other style property isolates spacing; enlarging text and reflowing at narrow widths are separate criteria. - **Images of text are out of scope**, and so is text drawn to a canvas, which the Understanding document treats as an image of text. ## Why headline cards break The documented failure (F104) is text that is **clipped** or that **overlaps** other content after the override. In a news site's card component the cause is almost always an assumption about how big the text is: 1. **A fixed card height**, chosen so that exactly two lines of headline fit. 2. **Hidden overflow**, which turns text that would overlap into text that is silently cut off. 3. **A line limit sized in fixed units** rather than in lines, so the limit and the text disagree after the override. 4. **Text positioned over an image** at a fixed offset, so taller text runs off the photo or over the byline. 5. **Fixed-width labels and tags**, such as a section label, where wider letter and word spacing pushes text out of its box. 6. **Styles written so the reader's override cannot take effect**; the Understanding document names not interfering with the user's ability to override as part of the author's responsibility. ## Fixing it in the system, not the page Every section front, search result and related-stories rail reuses the same card, so the fix belongs in the component rather than in page-by-page patches: - Give containers a **minimum** height instead of a fixed one, so they grow with their text. - Let the headline and standfirst **wrap**, and express any line limit in lines rather than fixed units. - Keep text **in the flow** rather than pinned over media, or give an overlay room to grow. - Size tags and buttons by their content plus padding, not by a fixed width. - Treat any design request that text must fit in exactly N lines as a documented exception that comes with a way to reveal the full text. The same design rule protects a native news app. The criterion is written for markup content, but a card with a fixed height breaks in exactly the same way when a reader raises the platform's text settings, so one component rule serves both. ## Truncation and the ellipsis The Understanding document allows an **ellipsis** that appears because of a spacing override, as long as the content is still available: a mechanism reveals the truncated text (for instance on focus or activation), or the ellipsis sits in content that includes a link and the full text appears on the linked page. A headline card that links to its article can therefore truncate after an override, because the article page shows the whole headline. Truncation with no way to reach the full text fails. ## Testing so it stays fixed - Apply the four values with a test style sheet to **every card variant** in the component workshop, and review or screenshot-compare them for clipping and overlap. - Use the **longest real headlines** from the archive and from translated editions, not placeholder copy. - Add the override check to the component's release checklist, so a new variant cannot ship without it. - Re-run it on page templates, where cards sit inside fixed-height rails and grids.