• Success Criterion 1.4.12
  • Conformance level AA

Images or Controls That Disappear Under Text-Spacing Settings

1.4.12 — Text Spacing

Scenario

Setting

A pharmacy app's prescription-refill form

What’s wrong

Images or entire controls disappear when the user applies text-spacing overrides — not just clipped text, but whole elements vanishing from the page.

Example 

.refill-row { display: flex; height: 48px; overflow: hidden; }
.refill-row .med-icon { flex-shrink: 1; } /* the icon shrinks to zero width as the label grows under wider spacing */

Why it matters

As the medication name wraps to a second line under wider spacing, the row's fixed 48px height and shrinkable icon cause the medication icon to disappear entirely, not just clip.

How to test

Apply the text-spacing override across the page: if entire images or controls disappear (not just clipped text), it fails.

How to fix

Give icons and controls flex-shrink: 0 so growing text pushes the row taller instead of squeezing other elements away.

.refill-row { display: flex; min-height: 48px; height: auto; }
.refill-row .med-icon { flex-shrink: 0; width: 24px; }

Outcome

A patient sees the medication icon stay in place even as the label wraps to two lines under wider spacing.

Who is affected

Users applying custom text spacing lose entire visual controls, like medication icons, that flex layout squeezes out of existence.

Learn more

Related scenarios