• Success Criterion 1.4.12
  • Conformance level AA

Tooltip or Dropdown That Truncates Under Text-Spacing Overrides

1.4.12 — Text Spacing

Scenario

Setting

A recipe site's ingredient list

What’s wrong

Tooltips/dropdowns sized to unspaced text truncating under override.

Example 

.unit-tooltip { width: 160px; height: 32px; overflow: hidden; white-space: nowrap; }
<!-- tooltip text: "2 cups = 473 mL" -->

Why it matters

Under wider word spacing, the unit-conversion tooltip's text overflows its fixed 160px width and gets truncated to '2 cups = 4...'.

How to test

Apply the text-spacing override and open tooltips/dropdowns: if they're sized for unspaced text and now truncate, it fails.

How to fix

Size tooltips to their content rather than a fixed pixel box so wider spacing doesn't silently cut off part of the message.

.unit-tooltip { width: max-content; max-width: 240px; height: auto; white-space: normal; }

Outcome

A cook with wider spacing reads the complete '2 cups = 473 mL' conversion instead of a cut-off fragment.

Who is affected

Low-vision cooks with custom spacing settings get an incomplete, misleading conversion instead of the full measurement.

Learn more

Related scenarios