Ensure That Text Spacing Set Through Style Attributes Can Be Adjusted with Custom Stylesheets

Casandra Visser

Author

Yotam Flohr

Researcher

Ritvik Shrivastava

Expert

July 29, 2024

Disabilities affected: Blind Low vision Hearing Mobility

Standards: WCAG 2.2 Level AA

Web accessibility standards require that text spacing set through style attributes can be adjusted with custom stylesheets.

Why It Matters

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

Fixing the Issue

Developers should ensure that inline text spacing must be adjustable with custom stylesheets.

Good Code Example

Code example

<!-- 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>

Copy

Bad Code Example

Code example

<!-- 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>

Copy

Test Cases

For more examples, visit the following pages in the W3C’s GitHub’s ATC Rules library: