Text spacing
Silktide finds elements whose inline styles lock their text spacing -
letter-spacing, word-spacing, or line-height - with !important at a
value below the WCAG minimum, so users cannot adjust it.
Why this matters
People with dyslexia or low vision often need text spread out to read it: taller lines, wider gaps between letters and words. They do this with browser extensions and custom stylesheets that override a page's spacing.
Those tools inject ordinary author-level CSS. An !important declaration
inside an element's style attribute beats every author-level rule, no matter
how specific - it is the one construct on a page those tools cannot override.
When it locks spacing below the minimums, the user is simply shut out.
success criterion 1.4.12 (level AA) requires that content survives users raising text spacing to at least:
- Line height - 1.5 times the font size
- Letter spacing - 0.12 times the font size
- Word spacing - 0.16 times the font size
How to fix it
For each flagged element, do one of the following:
- Remove the
!importantflag from the inline declaration. Users' tools can then override it, and your design is unchanged for everyone else. - Move the declaration into a stylesheet. Even with
!important, stylesheet rules can be overridden by user tools. - Raise the value to the WCAG minimum if the spacing genuinely must be pinned.
<!-- Fails: locked below the minimum; user tools cannot override this -->
<p style="line-height: 1.2 !important">…</p>
<!-- Fixed: overridable -->
<p style="line-height: 1.2">…</p>
<!-- Also fine: locked, but at a value that already meets the minimum -->
<p style="line-height: 1.5 !important">…</p>
How Silktide tests this
- Find elements whose
styleattribute declaresletter-spacing,word-spacing, orline-heightwith!important, and that directly contain visible text. - Resolve the declared value against the element's font size.
- Report the element when the locked value is below the WCAG minimum for that property.
This mirrors the W3C ACT rules for 1.4.12 (letter spacing, word spacing, line height).
Silktide does not flag !important spacing in stylesheets - user tools can
still override those - and does not simulate applying the spacing overrides to
detect broken layouts, which no automated tool currently does. Passing this
check means nothing on the page blocks users from adjusting spacing; testing
that your layout stays readable with adjusted spacing is a quick manual test
with a text spacing bookmarklet.
Troubleshooting
The inline style comes from a framework or third-party widget
Component libraries and embed scripts sometimes write inline !important
styles. They count against your page all the same; check the vendor's
settings or raise it with them.
The spacing is locked at a compliant value
Values at or above the WCAG minimums pass even when locked - locking
line-height: 1.6 !important harms nobody, because it already exceeds what
users would raise it to.