Line-Height CSS important directive detected
| Field | Value |
|---|---|
| Rule code | Text_LineHeight_Important_Detect |
| WCAG conformance level | AA |
| WCAG success criterion | 1.4.12 Text Spacing |
| Must be fixed at source | Yes |
Description
We detected text with the CSS !important directive on the line-height attribute. When the !important CSS directive is used, users with their own stylesheets are prevented from applying them to certain elements on the page and as a result, are unable to restylize text and prevents tools from providing assitive style enhancements. We recommend modifying style attributes without the CSS !important directive to allow user-based enhancements that may assist with the readability of the text presentation. When users can override text-based styles: people with low vision who require increased space between lines, words, and letters can read text; people with dyslexia may increase space between lines, words, and letters to increase reading speed; and white space between blocks of text can help people with cognitive disabilities discern sections and call out boxes.
How to fix
If the line-height is not at least 1.5 times the utilized font-size, remove the '!important' directive from text-based line-height styles and ensure proper CSS inheritance is utilized instead. You can be more specific about CSS selector targetting such as: 'body main .spacedlines { line-height: 1.4rem; }' instead of forced, important styles like '.spacedlines { line-height: 1.4rem !important; }'.