WebsightWho it affects
Someone with dyslexia reading the parish council minutes switches on their spacing extension and every paragraph opens up, except the ones the content editor stamped with an inline line-height.
Someone with low vision who applies their own spacing to every site finds the letters in the headings still crammed together.
The content editor pasted from a word processor and has no idea the editor injected style="line-height:1 !important".
Broken versus fixed
The broken markup is shown as code rather than rendered, because the effect is in how it is announced or handled, not how it looks.
<p style="line-height: 1.1 !important; letter-spacing: -0.5px !important">Minutes of the meeting held on 14 October.</p>A spacing extension sets line-height to 1.5 and letter-spacing to 0.12em, and loses. The inline !important wins.
<p class="minutes">Minutes of the meeting held on 14 October.</p>
<style>.minutes { line-height: 1.5; }</style>A class in the stylesheet gives the same look, and anyone's own spacing can override it.
Test it by hand in two minutes
- In the Elements panel search for !important. Look for it inside style attributes on line-height, letter-spacing or word-spacing.
- Install a text spacing bookmarklet or extension (several free ones apply the WCAG 1.4.12 values) and switch it on. Every paragraph should open up; any that do not are the problem.
- Check what your CMS outputs, not just your templates; rich text editors and page builders are the usual source.
- Read the page with the spacing applied. Nothing should be cut off, overlapping or hidden; that is the other half of 1.4.12.
The fix
<p style="line-height: 1.1 !important">Minutes of the meeting held on 14 October.</p><p class="minutes">Minutes of the meeting held on 14 October.</p>The !important is almost never needed. If a plugin adds it, look for the plugin's own setting; failing that, strip it on output.
Word spacing from a page builder
<h2 style="word-spacing: 2px !important">Agenda</h2><h2 class="agenda-heading">Agenda</h2>
<style>.agenda-heading { word-spacing: 2px; }</style>Move the value into a class. The check only objects to !important in the style attribute, but inline styles are easier to lose track of anyway.
Common mistakes
- Moving the !important into the stylesheet but keeping it. The check passes, but a spacing extension still loses to it. Drop it altogether.
- Setting line-height in pixels rather than a unitless number, so it does not grow when the text is enlarged.
- Fixing the height of text containers, so wider spacing makes text overflow and get cut off.
- Assuming it only matters for paragraphs; headings, buttons and table cells count too.
WCAG criteria this rule maps to
axe-core tags this rule as WCAG 2.2 level AA. It is one of the checks for:
- 1.4.12 Text Spacing (level AA). Official W3C text.
The scanner reads every style attribute and fails any that sets line-height, letter-spacing or word-spacing with !important. It does not test whether the page survives wider spacing without clipping or overlap, which is what WCAG 1.4.12 asks; try that with an extension yourself. Automated tools find only part of the accessibility problems on a page; a pass on this rule is not a pass on the criterion.
Related rules
meta-viewport
The viewport meta tag tells phones how to scale the page.
not run AA
Do not lock the page to portrait or landscape
css-orientation-lock
Some sites decide they only work in landscape and use a media query to rotate the whole page 90 degrees when the phone is held upright, or show a please rotate your device overlay.
AA
Text must have enough contrast with its background
color-contrast
Text needs enough difference in brightness from its background to be readable by people with low vision, or by anyone on a dim screen.
not run A
Use real headings, not bold paragraphs
p-as-heading
A paragraph made bold or bigger looks like a heading to a sighted reader.