• Success Criterion 1.4.12
  • Conformance level AA

Text Overlapping the Section Below After Spacing Changes

1.4.12 — Text Spacing

Scenario

Setting

A fitness app's workout tracker

What’s wrong

Text overlapping following sections because ancestors use fixed heights.

Example 

.workout-summary { height: 120px; }
.next-section { margin-top: 0; } /* relies on the fixed height above to create spacing */

Why it matters

When a user increases paragraph and line spacing, the workout summary grows taller than its fixed 120px box and spills into the section below it.

How to test

Apply the text-spacing override and scroll: if enlarged spacing pushes text into the section below (fixed-height ancestors), causing overlap, it fails.

How to fix

Use min-height plus real margin between sections instead of a fixed height standing in for spacing.

.workout-summary { min-height: 120px; margin-bottom: 16px; }
.next-section { margin-top: 0; }

Outcome

A user with wider spacing reads the workout summary and the next section heading cleanly, without overlap.

Who is affected

Low-vision users applying custom spacing see workout stats overlap the next section's heading, making both hard to read.

Learn more

Related scenarios