- Success Criterion 1.4.12
- Conformance level AA
Web Component Style That Blocks User Text-Spacing Overrides
1.4.12 — Text Spacing
Scenario
Setting
A podcast app's episode list
What’s wrong
Web-component shadow DOM (hidden internal code) styles that user stylesheets can't reach while content clips.
Example
Picture a podcast app's episode list: web-component shadow DOM (hidden internal code) styles that user stylesheets can't reach while content clips.
Why it matters
People with dyslexia or low vision who apply extra text spacing to read. Here, on a podcast app's episode list, the result is they can't read the text against its background.
How to test
Apply a user stylesheet with the text-spacing override to a web component: if its shadow DOM styles block the override from reaching the internal text, 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.
Outcome
After the fix, the same visitor to a podcast app's episode list can now read the text clearly against its background.
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
- Text Overlapping the Section Below After Spacing Changes
- 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