Text is cut off by its box

Why does it matter?

Success criterion 1.4.10 asks that content fits a 320 pixel wide window with nothing lost. This box hides what does not fit, so part of the text cannot be seen or scrolled to. Text cut off on purpose, with the whole text available another way, is fine.

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?

Text that runs past the edge of a box that hides what does not fit, with no way to scroll to it. For review: text cut off on purpose, with the whole text available another way, is fine.

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

How do I fix it in WordPress?

Let the box grow or wrap: remove the fixed height or width, or overflow: hidden, or let the box scroll. On a page wrapper, overflow-x: hidden hides the problem rather than fixing it, so find the element that is too wide and give it max-width: 100%. Then test with the window 320 pixels wide.

Example

.card { height: 60px; overflow: hidden; }

.card { min-height: 60px; }

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.