Text is cut off or overlaps when text spacing is increased

Why does it matter?

Many people with dyslexia or low vision use a browser extension or their own style sheet to add space between lines, letters and words. Buttons, cards and menus with fixed heights then cut the text off or pile it on top of other text, so it can no longer be read.

Who it affects: Keyboard, screen reader and low-vision users — every visitor meets the page title, language, landmarks, keyboard focus, target sizes and zoom settings on every page.

What does Lumtera flag?

Checked in review mode's Whole page tab when you tick "Also test text spacing" (the page flickers while it runs). Lumtera applies the spacing WCAG names for a moment (line height 1.5, space after paragraphs twice the font size, letter spacing 0.12 and word spacing 0.16 times the font size), then looks for text that now runs past the edge of a box that hides its overflow, and for text that now lands on top of other text. Each is for review, up to ten per page, since a box may cut text off on purpose.

Check ID page-text-spacing, as shown in review mode and saved results.

How do I fix it in WordPress?

Let boxes grow with their text: replace fixed heights with min-height, and remove overflow: hidden (or let the box scroll) where text sits. Avoid fixed widths on buttons and labels. These rules usually live in the theme's or page builder's CSS. Then run the text spacing test again.

Example

.card-title { height: 48px; overflow: hidden; }

.card-title { min-height: 48px; }

How do I check the fix?

1. Reload the page in review mode and run the Whole page tab again. The finding disappears once the rendered page passes.
2. Load the page and press Tab: a "Skip to content" link should appear first, and you should always see where focus is, even under a sticky header. Pinch-zoom on a phone, and check the browser tab shows a meaningful title.