Features
Start a free trial

Ensure that text spacing set through style attributes can be adjusted with custom stylesheets

Rule ID: avoid-inline-spacing User Impact: serious Guidelines: WCAG 2.1

Inline styles that set text spacing properties such as line-height, letter-spacing, and word-spacing can hinder users from customizing text appearance to suit their reading preferences. To enhance accessibility, especially for individuals with cognitive disabilities, it's essential to allow text spacing adjustments through custom stylesheets.

About This Rule

This guideline ensures that text spacing set through style attributes can be adjusted with custom stylesheets, enhancing accessibility for users who require specific text spacing to improve readability. Adhering to this practice aligns with the following standards:

  • WCAG 2.1 (AA): 1.4.12 Text Spacing
  • WCAG 2.2 (AA): 1.4.12 Text Spacing
  • EN 301 549: 9.1.4.12 Text Spacing

Why It Matters

Many individuals with cognitive disabilities find it challenging to track lines of text when spacing is inadequate. Providing sufficient spacing, typically between 1.5 to 2, enables users to more easily transition between lines, improving readability and comprehension.

How to Fix

To ensure text spacing is adjustable:

  • Avoid Using Inline Styles for Text Spacing: Refrain from setting text spacing properties directly within the style attribute of HTML elements.
    Copy code
    <!-- Avoid this -->
<p style="line-height: 1.5;">Sample text</p>
  • Utilize External or Embedded Stylesheets: Define text spacing properties within external CSS files or embedded <style> tags, allowing users to override these settings with their custom stylesheets.
    Copy code
    /* External or embedded CSS */
p {
  line-height: 1.5;
}
  • Avoid Using !important in CSS: The !important declaration prevents users from overriding styles with their custom stylesheets. Ensure that text spacing properties can be adjusted by omitting !important.
    Copy code
    
/* Avoid this */
p {
  line-height: 1.5 !important;
}

Examples

Incorrect

Inline styles with !important declarations that prevent user adjustments:

Copy code
<p style="line-height: 1.5 !important;">Text content</p>

Correct

Text spacing defined in an external stylesheet without !important, allowing user customization:

Copy code
/* External CSS */
p {
  line-height: 1.5;
}

More Information

Other Rules

Interested in other web accessibility rules? Please see these other rules: