When text spacing hides a condition in a card

The last sentence is the important one

The export card says the file is ready for review. Farther down, it says to keep the export on hold if values are missing. A fixed-height box can hide that second paragraph when the reader changes text spacing, leaving a rather different instruction on screen without changing a word in the source. The important question is whether the condition survives, not whether the card keeps the dimensions that looked tidy in the design.

This is a useful way to examine readability because the consequence is visible. A reader adjusts the presentation to make it easier to follow, and the layout removes information needed to act. Keeping the original line count is no compensation. For this card, I would let the content take more room and judge the result by whether somebody can still see why the export might need to wait.

The original downloadable specimen places identical words in two cards. One has a fixed height and hidden overflow. The other has the same initial minimum height and can grow with its content. A toggle applies four spacing overrides to both. It is an inspectable HTML/CSS example, not a claim that a browser study or full accessibility audit was performed.

What the spacing requirement actually asks

WCAG’s text-spacing criterion requires no loss of content or functionality when the supported properties are overridden together to the stated values: line height at least 1.5 times font size, paragraph spacing at least 2 times, letter spacing at least 0.12 times and word spacing at least 0.16 times. It explicitly does not require authors to use those values as the default design. [1] That distinction prevents a useful adaptability check from becoming a universal typography recipe.

The test concerns whether the content survives the change. A person may prefer different spacing for their own reading, and the site should not sabotage that choice through an inflexible layout. The specimen’s toggle exists to expose the relationship; the criterion does not require every site to provide its own spacing button. A real assessment needs to apply the relevant overrides correctly rather than assume any extension’s failure proves the page blocked them.

Notice the combined effect. Extra letter and word space can create more line breaks. Increased line height makes each line occupy more vertical space. Paragraph spacing adds another interval. A layout that tolerates one change may fail when all four apply together. Checking a single generous line-height value while leaving the other properties untouched answers a different question.

The criterion also includes language and script qualifications. [1] This specimen uses British English in horizontal text, where the four-property combination serves the demonstration. Another writing system needs the relevant treatment rather than a copied set of settings declared universally comfortable. The common requirement is that an appropriate reader adjustment preserves the information and function, not that every page and every reader settles on the same spacing.

Follow the constraint instead of shrinking the words

The constrained card uses height:14rem and overflow:hidden. Once its content needs more space than that block provides, the excess has no visible route out. The source can still contain the complete instruction while the person sees only part of it. That is why checking text presence in HTML cannot establish that the rendered information remains available.

Reducing the font or tightening the spacing would fit the words back into the box by undoing the adjustment the person just made. An ellipsis without access to the full instruction would merely make the loss look designed. Neither addresses why an ordinary export condition has a fixed ceiling above it. The height constraint is the place to investigate before asking the content, or the reader, to become more accommodating.

The growing variant replaces height:14rem with min-height:14rem. It retains the initial minimum size while allowing the text in normal flow to require more room. For the export instruction, this means the second paragraph remains part of the card rather than exceeding a fixed ceiling. Other components may need another repair, but identifying the actual size constraint avoids undoing the reader’s spacing changes to make the content fit.

Removing hidden overflow alone is not always enough. Content spilling over a neighbouring action may become visually available but unusable. Let the surrounding layout reflow as well, with adequate gaps and controls following the content rather than sitting on top of it. Repairing a single box should not merely move the overlap into the next component. If matching card heights is the aesthetic goal, use the layout’s ability to align or stretch items while allowing the row to follow its tallest content. Equal appearance does not require a fixed text ceiling. On a single-column layout, the cards need not preserve an empty desktop-sized silhouette at all; their content can determine the height naturally.

Preserve the task when the page narrows

At a narrow width, the same words need more lines even before spacing changes. WCAG’s reflow guidance addresses reading without loss of information or function and without two-dimensional scrolling under its stated conditions, with exceptions for content that requires that layout. [2] An ordinary instruction card is different from a complex data table. Do not borrow an exception from one to excuse an avoidable horizontal reading task in the other.

The specimen’s cards can move from two columns to one. The text itself should remain readable in that column, and the action following it should stay reachable. Larger text, longer translations and a wider fallback font can exercise similar assumptions about available space, though they are distinct checks with their own purposes. A component designed around exactly two default lines is brittle across several ordinary variations.

Buttons and navigation need attention too. A label may wrap or become longer under spacing changes. If the control clips its last word, the person may lose the part distinguishing “Save draft” from “Save and send”. Allow the label and target to remain coherent, and inspect keyboard focus in the altered state. Readability and operability meet at these small interfaces; the problem is not confined to long article paragraphs.

Use the longest meaningful content, not a short placeholder that gives the component an easy afternoon. The export specimen puts a decision-changing condition in its second paragraph, so we can follow what clipping actually removes. A longer label, translation or fallback font may reveal a similar constraint through a different check. The task is to preserve the instruction people rely on, rather than count the pixels protruding from an otherwise attractive border.

A useful review records what remained available

For the real component, apply the four overrides together, inspect at the relevant widths and follow the complete reading and action path. Verify the last words, links, error text and focus states. If something is truncated, establish whether a supported mechanism reveals it. The criterion’s guidance permits certain truncation patterns when the full content remains available; an unexplained crop is a different matter. [1]

Record the observed environment and exact failed element rather than announcing that “text spacing is broken” across the entire site. A screenshot can show overlap, while the DOM and computed styles identify the constraint to repair. Its expected failure mechanism is the fixed ceiling combined with hidden overflow.

A taller card can be the correct repair. After the repair, repeat the state that exposed the defect and check neighbouring content. A growing card may push a button lower, which is often entirely reasonable, but a sticky panel or separately positioned action can still overlap it. The acceptance condition is that the person retains the information and can complete the task, not that the component returns to the exact original screenshot.