Do not override text spacing with !important
Last updated:
How to fix this issue?
Remove !important from CSS rules that set text spacing properties:
BAD:
!important prevents user overrides
p {
line-height: 1.2 !important;
letter-spacing: 0.05em !important;
word-spacing: 0.1em !important;
}
CORRECT:
no !important
p {
line-height: 1.5;
letter-spacing: 0.05em;
word-spacing: 0.1em;
}
The same rule applies to inline styles:
BAD:
<p style="line-height: 1 !important;">Text here</p>
CORRECT:
<p style="line-height: 1.5;">Text here</p>
If the design requires specific spacing, set it without !important and test that user stylesheets can override it. WCAG 1.4.12 requires the page to remain readable with these minimum spacing values:
- Line height at least 1.5 times the font size
- Letter spacing at least 0.12 times the font size
- Word spacing at least 0.16 times the font size
Why is this important?
Some users need wider letter spacing, increased line height, or larger word spacing to read text comfortably. This includes people with dyslexia, low vision, or cognitive disabilities. Using !important on spacing rules blocks user stylesheets and browser extensions from applying these adjustments.
More info:
Rule info
Standard
WCAG AA SC 1.4.12
User impact
Serious impact Significantly hinders users with disabilities. Should be fixed as a high priority. Critical : blocks access entirely Serious : significantly hinders use Moderate : causes difficulty Minor : minimal disruptionFix complexity
High level of required technical expertise To resolve this issue, you need technical expertise in software engineering. Resolving this issue requires modifying the software code, for which you need a background in software engineering.Affects
Visual People with vision related disabilities can include those with color blindness, low vision, or complete blindness. Providing alternative text (also known as alt text) for graphical content is especially important for these individuals, as it allows assistive technologies such as screen readers to describe the content to them. Cognitive disability For people with cognitive disabilities, it is important to design websites in a way that makes them easy to navigate and understand. This can include using clear and simple language, providing consistent navigation, and avoiding complex or confusing layouts. It can also involve using images and multimedia content that are easy to comprehend, and avoiding content that may be overwhelming or distracting.hat everyone has equal access to information and services online.
Free Website Accessibility Audit
Was this article helpful?
Thanks for your feedback!