• Success Criterion 1.4.10
  • Conformance level AA

Overlapping Content When the Page Is Zoomed to 400%

1.4.10 — Reflow

Scenario

Setting

A music streaming app's playlist screen

What’s wrong

Content overlap at 400%: absolutely positioned elements colliding, text under images.

Example 

.now-playing { position: relative; }
.album-art { position: absolute; top: 0; left: 0; width: 300px; }
.track-title { position: absolute; top: 20px; left: 40px; }

Why it matters

A listener zoomed to 400% sees the track title text overlapping the album art, making both illegible.

How to test

Zoom the browser to 400% (or set viewport to 320px): check for absolutely positioned elements colliding or text sitting under images.

How to fix

Replace absolute positioning between related elements with flexbox or grid so they reflow together instead of overlapping.

.now-playing { display: flex; align-items: center; gap: 12px; }
.album-art { width: 60px; flex-shrink: 0; }
.track-title { position: static; }

Outcome

A listener zooms in and reads the track title clearly beside the album art instead of through it.

Who is affected

Low-vision listeners who rely on 400% zoom get overlapping, unreadable text and artwork instead of a clean layout.

Learn more

Related scenarios