• Success Criterion 1.4.12
  • Conformance level AA

Author CSS Blocking the User’s Own Text-Spacing Stylesheet

1.4.12 — Text Spacing

Scenario

Setting

A nonprofit's donation form

What’s wrong

!important inline/author styles blocking user stylesheet overrides from applying at all.

Example 

.donation-form p { line-height: 1.2 !important; letter-spacing: normal !important; }

Why it matters

A donor's own browser stylesheet setting 1.5x line spacing has no effect on this form, since !important locks the tighter spacing in place.

How to test

Apply the text-spacing override via a user stylesheet or extension: if the page's own !important CSS blocks the override from applying at all, it fails.

How to fix

Avoid !important on spacing properties; author styles should set reasonable defaults, not lock out user overrides.

.donation-form p { line-height: 1.5; letter-spacing: 0.12em; }

Outcome

A donor's custom spacing settings apply to the form exactly as they do everywhere else on the web.

Who is affected

Users who depend on a personal stylesheet or browser extension for readable spacing are overridden entirely by the site's own rules.

Learn more

Related scenarios