What This Rule Checks
Using inline styles to manage spacing between elements, such as setting font size, line height, letter spacing, or word spacing, can negatively impact accessibility. This approach may restrict users who rely on assistive technologies like screen readers or magnifiers from adjusting the content in ways that improve readability.
Who Is Affected
This issue primarily affects: Attention Deficit users, who have attention deficit-related needs; Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices; Cognitive users, who benefit from clear structure, simple language, and consistent navigation patterns.
Why This Matters
Users with dyslexia and other reading disabilities need to adjust text spacing to improve readability. Inline styles with !important prevent user stylesheets from overriding spacing values. This violates WCAG 1.4.12 (Text Spacing).
How to Fix
To fix this, avoid using inline styles for managing spacing properties. Instead, opt for external stylesheets or CSS classes to give users flexibility in adjusting these settings.
Code Examples
<!-- Inline spacing that cannot be overridden -->
<p style="letter-spacing: 2px !important; word-spacing: 5px !important;">
This text has fixed spacing.
</p>
Copy
<!-- Spacing via CSS classes (overridable by user stylesheets) -->
<p class="spaced-text">
This text has flexible spacing.
</p>
<style>
.spaced-text {
letter-spacing: 0.12em;
line-height: 1.5;
}
</style>
Copy
Common Mistakes to Avoid
- Using inline styles with !important for text spacing properties.
- Setting fixed pixel values for letter-spacing and word-spacing instead of relative units.
- Not testing content with user-adjusted spacing (WCAG requires support for 0.12em letter-spacing, 0.16em word-spacing, 1.5x line-height, 2x paragraph spacing).
Tip: Text accessibility includes contrast, spacing, and visual presentation. Users with low vision or cognitive disabilities depend on well-formatted, high-contrast text that can be resized and recolored with user stylesheets.
Related WCAG Criteria
- 1.4.12: Text Spacing
- 1.4.12: Content on Hover or Focus