Keep buttons intact when text spacing increases
Text spacing overrides make words wider, and a fixed-width button is a box that cannot take it. W3C lists C35 as sufficient for 1.4.12 Text Spacing and gives two ways to satisfy it. Size the container larger than the text's default width, or let the container expand as the text does. It also gives a number, which is the most useful thing on the page for anybody who cannot abandon a fixed width. A safe value is 20 percent wider than the default maximum, so a box built for 20 characters should have room for 24. The technique is aimed at short strings that are not meant to wrap, navigation items and buttons above all, since longer passages are expected to rewrap anyway. Padding in em, a min-width rather than a width, and no hidden overflow will handle most of it.
How we find it in an audit
We apply the text-spacing values from the rule with a bookmarklet and look at the navigation and the buttons first, because that is where fixed widths cluster. Clipped labels, text spilling past a border and buttons overlapping each other are the three things to look for, and none of them shows up in a code review.
How affected users experience it
This serves readers who widen letter and word spacing to make text legible, which includes many people with dyslexia and low vision. When a button's label is clipped to Submit Ord, they are reading a control whose meaning has been cut in half, and the thing they cannot afford to guess about is the button that spends their money.
Passes vs. fails
Passes
.btn { min-width: 6em; padding: 0.5em 1em; white-space: nowrap; }Fails
.btn { width: 96px; height: 32px; overflow: hidden; white-space: nowrap; }How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Important letter spacing in style attributes is wide enoughA tool can check this
- Important line height in style attributes is wide enoughA tool can check this
- Important word spacing in style attributes is wide enoughA tool can check this
Other ways to satisfy this rule
6 guides on this site are filed under 1.4.12 Text Spacing. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
This guide is our interpretation of W3C technique C35: Allowing for text spacing without wrapping. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.