Inline text spacing must be adjustable with custom stylesheets
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.
Fixing 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>