- 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
* { line-height: 1 !important; letter-spacing: 0 !important; } Why it matters
People with dyslexia or low vision who apply extra text spacing to read.
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
With user text-spacing overrides applied (line height 1.5, paragraph 2x, letter 0.12em, word 0.16em), all content and controls must remain visible and usable. /* No !important overrides — let user style sheets adjust spacing */ !important locks out user stylesheets that increase line/letter/word spacing for readability.
Outcome
On a fitness app's workout tracker, this barrier is gone for people with dyslexia or low vision who apply extra text spacing to read — they no longer have to work around this.
Who is affected
People with dyslexia or low vision who apply extra text spacing to read.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Text That Clips or Overlaps Under User Text-Spacing Settings
- Fixed-Height Container Clipping Text at Wider Line Spacing
- Author CSS Blocking the User’s Own Text-Spacing Stylesheet
- Button Label That Vanishes Under Increased Text Spacing
- Tooltip or Dropdown That Truncates Under Text-Spacing Overrides
- JavaScript Truncation That Deletes Content on Text-Spacing Change