Inline text spacing must be adjustable with custom stylesheets

Rule ID: avoid-inline-spacing

Ruleset: axe-core 4.1

User Impact: Serious

Guidelines: WCAG 2.1 (AA)

Need accessibility training?

Deque University offers an extensive curriculum of self-guided online courses for every skillset and experience level.

Start learning 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 Success Criteria [WCAG 2.1 (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.