• Success Criterion 1.4.12
  • Conformance level AA

Button Label That Vanishes Under Increased Text Spacing

1.4.12 — Text Spacing

Scenario

Setting

A government tax-filing portal

What’s wrong

Buttons whose labels vanish or wrap behind icons under spacing overrides.

Example 

.submit-btn { width: 140px; overflow: hidden; white-space: nowrap; }
.submit-btn .icon { position: absolute; right: 8px; }

Why it matters

Under wider letter and word spacing, 'Submit Return' grows past the button's fixed 140px width and wraps directly behind the icon, becoming unreadable.

How to test

Apply the text-spacing override to button labels: if the label text vanishes or wraps behind an icon, it fails.

How to fix

Let buttons grow with their label under spacing overrides instead of clipping or wrapping text behind a fixed icon.

.submit-btn { width: auto; min-width: 140px; padding: 10px 40px 10px 16px; white-space: normal; }

Outcome

A filer with wider letter spacing reads 'Submit Return' clearly instead of a label mangled behind an icon.

Who is affected

Low-vision filers using custom text spacing can't read the submit button's label, risking a missed or unintended submission.

Learn more

Related scenarios