Search topics
Button labels cut off when people widen text spacing
Buttons with a fixed height, a single line and hidden overflow can't make room for a label that wider spacing makes longer, so the label is cut short.
The problem
People who widen letter and word spacing to read more easily can't read button labels that a fixed-size button cuts short.
A shop's product page puts a large photo on the left and the details in a narrow column beside it. In that column, two buttons sit side by side under the price: "Add to basket" and "Buy it now". At the shop's own spacing both labels fit with room to spare. Someone with dyslexia reads with an extension that widens the space between letters and words. Each label grows by about a fifth, but the buttons stay the same size. "Buy it now" still fits; "Add to basket" doesn't, and is cut short to "Add to bas…". On a narrower phone, both are cut. The size selector's tabs and the "Notify me" button further down the page fail the same way.
The buttons share the row equally and are styled with height: 44px and line-height: 44px to centre the label. The label inside has white-space: nowrap to keep it on one line, and overflow: hidden with text-overflow: ellipsis in case it is ever too long. Success criterion 1.4.12 asks that nothing is lost when people set line height to 1.5 times the font size, space paragraphs by 2 times the font size, letters by 0.12 times and words by 0.16 times. At those values each label needs more width, but the button can't grow across because it shares a fixed row, can't wrap because of nowrap, and can't grow down because of its fixed height. So the browser cuts the label and adds an ellipsis.
People who change text spacing set it once for every site, and many use a browser extension or reading mode that also changes the font, which lengthens labels again. Buttons are where a cut hurts most: "Add to bas…" can still be guessed, but "Delete acc…" and "Delete add…" can't be told apart.
2 of 10 groups affected
- No vision (not affected)
- Low vision (affected)
- Colour vision (not affected)
- No hearing (not affected)
- Hard of hearing (not affected)
- No speech (not affected)
- Motor (not affected)
- Reach, strength (not affected)
- Cognitive (affected)
- Seizures (not affected)
- Limited language, cognitive and learning abilities People with dyslexia who space out letters and words, often with a browser extension, so that letters stop crowding together. The button they need says "Add to bas…" and they have to guess the rest.
- Limited vision People with low vision who widen spacing so that letters stay apart when magnified. A cut label is harder still to work out at large sizes.
axe checks one part of 1.4.12: its rule avoid-inline-spacing flags inline spacing marked !important, which stops a reader's stylesheet from taking effect. It doesn't apply the spacing and look for clipped labels, so the buttons above pass. A probe has to apply the four values, then compare each control's box with the text inside it. AI fixes tend to go wrong in one of three ways, each of which leaves part of the label unreadable:
- Deleting
overflow: hiddenalone: the label spills past the button's edge and runs into the next button. - Shrinking the font when the label doesn't fit: the reader's spacing is kept, but the text gets smaller than they can read.
- Adding a
titlewith the full label: it shows only on mouse hover, after a delay, and never on touch.
Try it
Widen the text spacing and read the buttons.
Turn on Text spacing: line height 1.5, letter spacing 0.12em, word spacing 0.16em and paragraph spacing 2em. Can you still read both buttons in full?
Broken Can you fix this?
Cast iron skillet, 26 cm
49.00
A recreated demo. The broken version is intentionally inaccessible.
The fix
Give buttons a minimum height and padding instead of a fixed box, and let the label or the row wrap.
- 1Give buttons and tabs a min-height and padding, never a fixed height.
- 2Let a label wrap, or its row wrap, rather than cutting it with an ellipsis.
- 3Never set line, letter or word spacing inline with !important.
<div class="buy-row"> <button type="submit" class="button"><span class="button-label">Add to basket</span></button> <button type="button" class="button button-secondary"><span class="button-label">Buy it now</span></button></div>With the 1.4.12 spacing, each label is wider than its half of the row. The button can't grow in any direction, so the end of the label is hidden behind an ellipsis.
At the shop's own spacing the buttons look as before: one line each, 44 pixels tall, with the label centred by padding instead of line height. With wider spacing, a label that no longer fits wraps onto a second line and the button grows taller to hold it. The buttons stay side by side and the HTML doesn't change.
Both options keep every label readable with the 1.4.12 spacing, and both meet the criterion. Letting the label wrap is the smaller change and keeps the buttons in the place the design gave them, but a two-line button label is a little harder to scan. Letting the row wrap keeps each label on one line, which reads better, but the buttons stack when space runs out, so the layout below them moves down. Choose label wrapping when the buttons have to stay side by side, such as in a toolbar or a table row; choose row wrapping where stacking is fine, which is true of most forms and product pages.
Find the other fixed controls. Look for height with line-height in pixels, white-space: nowrap and text-overflow: ellipsis on anything that holds a label: tabs, pills, badges, nav links, dropdown items, table headers. Each needs min-height and padding instead. An ellipsis on a long product name in a list, with the full name on the product page, is a design choice; an ellipsis on a control's label is lost content.
Centre with padding, not line height. line-height: 44px centres one line and makes every wrapped line 44 pixels tall. Use padding, or display: inline-flex with align-items: center, so a second line sits close to the first.
Leave spacing open to override. People apply the 1.4.12 values with a user stylesheet or an extension. An inline style="letter-spacing: 0 !important", often written by a page builder or a rich-text editor, beats their stylesheet, and that is a failure on its own (axe's avoid-inline-spacing). Move spacing into the stylesheet, and drop !important from line, letter and word spacing.
Overlapping, not only clipping. Text positioned absolutely, such as a "Sale" badge pinned to a product photo or a caption over a hero image, doesn't get cut off when spacing grows; it runs over its neighbours instead. Check that it still has room, or let it take its place in the flow.
Icons and fixed widths. A button with an icon and a label in a fixed width fails the same way. Let it size to its content, with a min-width if the design needs one.
Third-party widgets. Payment buttons, chat launchers and cookie banners often set their own heights. Test them with the spacing applied and report clipping to the vendor; the criterion applies to the whole page.
Other scripts. Japanese and other scripts without spaces between words gain little from word spacing, but letter spacing and line height still apply. Test every language the site ships in.
Fixing this with an AI coding assistant? Get this guide as Markdown
Verify the fix
5 checks, no mouse.
Test with: Text spacing
Record the OS, browser and assistive-technology versions, the build, the date, and the actual result of each step. Repeat after the button component or theme changes.
Limits
This is a starting pattern, not a guarantee for every application. 1.4.12 asks only that content survives the four values; it doesn't require a site to offer spacing controls of its own. Some content is exempt, such as text in images and captions burned into video. Class names in the snippets are placeholders. Test every template that has controls, not only the product page.
This is a recreated teaching example, not a finding about a named client. The code is a starting pattern: test it in your own product. No completed assistive-technology test is claimed here.
Keep this fixed as your code changes.
Turn guides like this into rules your coding agents and CI follow, then have the result retested with a keyboard and screen readers.