• Success Criterion 1.4.4
  • Conformance level AA

Fixed-Height Containers That Clip Content at 200% Zoom

1.4.4 — Resize Text

Scenario

Setting

An online spreadsheet's toolbar

What’s wrong

Fixed pixel heights on containers causing overlap/overflow-hidden at 200% text-only zoom.

Example 

.toolbar-dropdown { height: 40px; overflow: hidden; }
<!-- the font-family dropdown list is clipped to one row once text is enlarged to 200% -->

Why it matters

An analyst zoomed in to read small toolbar icons can't see the rest of the font options once the list clips to a single row.

How to test

Set zoom to 200% and check fixed-height containers: overflow:hidden combined with a fixed height clips content that no longer fits.

How to fix

Replace a hard-clipped fixed height with a scrollable max-height so enlarged content stays reachable.

.toolbar-dropdown { max-height: 320px; overflow-y: auto; }

Outcome

The analyst scrolls through the full list of fonts at 200% zoom and picks the one they need.

Who is affected

Low-vision users, who need dropdown menus to expand along with everything else at 200% zoom, not stay pinned to a fixed height.

Learn more

Related scenarios