• Success Criterion 1.4.4
  • Conformance level AA

Tooltip or Dropdown Menu That Clips Text at 200% Zoom

1.4.4 — Resize Text

Scenario

Setting

A streaming music app's search results

What’s wrong

Tooltips/dropdown menus whose fixed dimensions clip options at 200%.

Example 

.search-tooltip { width: 120px; height: 24px; overflow: hidden; }
<!-- the artist-name tooltip clips at 200% zoom, showing only the first few characters -->

Why it matters

A listener searching for a song can't read a clipped tooltip that was supposed to show the full artist name at higher zoom.

How to test

Set zoom to 200% and open tooltips/dropdown menus: if their fixed pixel dimensions clip the now-larger text/options, it fails.

How to fix

Let tooltips size to their content instead of a fixed box, capping width only if needed and never clipping height.

.search-tooltip { width: max-content; max-width: 240px; height: auto; overflow: visible; }

Outcome

The listener reads the full artist name in the tooltip and picks the right track from the search results.

Who is affected

Low-vision users, who rely on tooltips and small popups to disambiguate search results, not just the primary text.

Learn more

Related scenarios