• Success Criterion 1.4.12
  • Conformance level AA

Letter Spacing Set in Pixels That Ignores User Overrides

1.4.12 — Text Spacing

Scenario

Setting

A video-conferencing app's meeting controls

What’s wrong

CSS letter-spacing defined in px on components that then ignore relative overrides *and* clip.

Example 

.control-btn { letter-spacing: 3px; width: 64px; overflow: hidden; }
<!-- label "MUTE" clips when the user's own stylesheet adds letter-spacing on top -->

Why it matters

A user's letter-spacing override stacks on top of this fixed 3px value, pushing 'MUTE' past the button's 64px width and clipping the last letter.

How to test

Apply the text-spacing override where letter-spacing is defined in fixed px on a component: if it ignores the relative override and also clips, it fails.

How to fix

Define letter-spacing in em units and let control width grow with its label instead of clipping under stacked spacing.

.control-btn { letter-spacing: 0.05em; width: auto; min-width: 64px; padding: 8px 16px; }

Outcome

A participant with custom letter spacing reads the full MUTE label clearly during a call.

Who is affected

Low-vision participants applying custom letter spacing may not be able to tell whether Mute or another control is labeled correctly.

Learn more

Related scenarios