locked-text-spacing
CSS rules related to text spacings should not include the !important flag.
Description
Some users (such as people with dyslexia, attention disorders, or low vision) some times find it difficult to read long and dense blocks of text.
For these users, there are assistive technologies that adjust the text spacing on the page.
However, these tools usually change and adjust the values of the CSS rules that affect text spacing on the page.
When a developer uses CSS rules that can’t be overridden(i.e., inline CSS with the "!important" flag) these tools cannot do their job, and using them won't affect the text spacing on the page.
Quick Fixes
Avoid defining inline text-spacing related CSS rules with the !important flag. That includes:
- “
line-height” - “
letter-spacing” - “
word-spacing” - “
padding-top”, “padding-bottom” on paragraphs - “
margin-top”, “margin-bottom” on paragraphs
Note: The examples below are demonstrated on paragraph elements (i.e., <p>),
but the same applies to any element that contains text nodes.
1✗ <p style="line-height: 20px !important;">2 <!-- Paragraph Content -->3 </p>
1✗ <p style="line-height: 20px !important;">2 <!-- Paragraph Content -->3 </p>
1✗ <p style="word-spacing: 8px !important;">2 <!-- Paragraph Content -->3 </p>
1✗ <p style="letter-spacing: normal !important;">2 <!-- Paragraph Content -->3 </p>
In any case, it is a best practice to use relative units (i.e., “em”, “rem” or percentages) to define text size and spacings.
How Users Are Affected
Some users may find it difficult to read and concentrate on the text and, in some cases, even find it unreadable.
WCAG Success criteria
This issue might cause elements to fail one or more of the following Success criteria:
1.4.12 Text Spacing (AA)