Inline text spacing must be adjustable with custom stylesheets

Rule ID: avoid-inline-spacing
Ruleset: axe-core 4.8
User Impact: Serious
Guidelines: WCAG 2.1 (AA), WCAG 2.2 (AA), EN 301 549

Start building more accessible experiences

Axe DevTools Pro helps dev teams find and fix up to 80% of accessibility issues while coding. No experience required. Get started with your free trial today.

Compliance Data & Impact

User Impact

Serious
▼
Minor
Critical

Disabilities Affected

  • Attention Deficit
  • Blind
  • Low Vision
  • Deafblind
  • Mobility
  • Cognitive

Standard(s)

  • WCAG 2.1 (AA)
  • WCAG 2.2 (AA)
  • EN 301 549

WCAG Success Criteria [WCAG 2.1 (AA)]

  • 1.4.12: MUST: Text Spacing
  • 1.4.12: MUST: Content on Hover or Focus

WCAG Success Criteria [WCAG 2.2 (AA)]

  • 1.4.12: MUST: Text Spacing
  • 1.4.12: MUST: Content on Hover or Focus

    How to Fix the Problem

    Correct markup solutions

    The avoid-inline-spacing rule includes five markup patterns that pass testing criteria: 

    <!-- style attribute includes font-size property -->
<p id="pass1" style="font-size: 200%">I stepped on a Corn Flake, now I'm a Cereal Killer...</p>
 
 
<!-- style attribute includes line-height property -->
<p id="pass2" style="line-height: 1.5;">
    On a scale from one to ten, what is your favorite color of the alphabet.</p>
 
<!-- style attribute includes letter-spacing property -->
<p id="pass3" style="letter-spacing: 50px;">
    The quick brown fox jumped over the lazy dog</p>
 
<!-- style attribute includes word-spacing property -->
<p id="pass4" style="word-spacing: 10px;">A group of 24 Caterpillars has 694 legs</p>
 
<!-- style attribute includes word-spacing, letter-spacing, and line-height properties -->
<p id="pass5" 
    style="word-spacing: 20ch; letter-spacing: 50rem; line-height: 3;">Look, a distraction!</p>

    Incorrect markup solutions

    The avoid-inline-spacing rule includes four markup patterns that fail testing criteria: 

    <!-- style attribute includes forced line-height property -->
<p id="fail1" style="line-height: 1.5 !important;">Banana error</p>
 
<!-- style attribute includes forced letter-spacing property -->
<p id="fail2" style="letter-spacing: 100em !important;">We need more cheeeeeeessseeeee!!!</p>
 
<!-- style attribute includes forced word-spacing property -->
<p id="fail3" style="word-spacing: -.4ch !important;">The cheese grater is in the way!</p>
 
<!-- style attribute a word-spacing property, a forced letter-spacing property, and a line-height -->
<p id="fail4" style="word-spacing: 200%; letter-spacing: 50rem !important; line-height: 3;">Yo, Darth Vader</p>

    Why it Matters

    Many people with cognitive disabilities have trouble tracking lines of text when a block of text is single spaced. Providing spacing between 1.5 to 2 allows them to start a new line more easily once they have finished the previous one.

    Rule Description

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

    The Algorithm (in simple terms)

    Inline text spacing must be adjustable with custom stylesheets.

    Resources

    Deque University Course Pages (subscription required)

    Contribute to axe-core on GitHub

    Other Resources

    You may also want to check out these other resources.

    Refer to the complete list of axe 4.8 rules.

    Was this information helpful?

    You have already given your feedback, thank you..

    Your response was as follows:

    Was this information helpful?
    Date/Time feedback was submitted: