R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Contact Info

Get A Quote

Ensuring Accessible Inline Spacing in Text

  • Home
  • Blog
  • Ensuring Accessible Inline Spacing in Text
  • June 1, 2025

Ensuring Accessible Inline Spacing in Text

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

How to Fix the Problem

To comply with the avoid-inline-spacing rule, inline styles applied to text must allow user agents (e.g., browsers or assistive technologies) to override them with custom stylesheets. This ensures users who need specific text spacing—such as individuals with dyslexia or other cognitive disabilities—can modify the spacing for better readability.

✅ Correct Examples

Use inline styles that define spacing properties without using !important, so they can be overridden:

html
<!-- Font size is adjustable -->
<p style="font-size: 200%;">I stepped on a Corn Flake, now I'm a Cereal Killer...</p><!– Line height is user-adjustable –>
<p style=“line-height: 1.5;”>On a scale from one to ten, what is your favorite color of the alphabet.</p>

<!– Letter spacing is not locked –>
<p style=“letter-spacing: 50px;”>The quick brown fox jumped over the lazy dog</p>

<!– Word spacing is flexible –>
<p style=“word-spacing: 10px;”>A group of 24 Caterpillars has 694 legs</p>

<!– Combination of all spacing types without !important –>
<p style=“word-spacing: 20ch; letter-spacing: 50rem; line-height: 3;”>Look, a distraction!</p>

❌ Incorrect Examples

Avoid using !important in spacing styles, as it prevents user stylesheets from overriding them:

html
<!-- Cannot override line height -->
<p style="line-height: 1.5 !important;">Banana error</p><!– Letter spacing is locked –>
<p style=“letter-spacing: 100em !important;”>We need more cheeeeeeessseeeee!!!</p>

<!– Negative word spacing with !important –>
<p style=“word-spacing: -.4ch !important;”>The cheese grater is in the way!</p>

<!– Mixed locked styles –>
<p style=“word-spacing: 200%; letter-spacing: 50rem !important; line-height: 3;”>Yo, Darth Vader</p>

Why it Matters

Users with cognitive disabilities, especially those who experience issues tracking text, rely on adjusted spacing for better legibility. If text spacing is rigid due to !important declarations, these users cannot apply their preferred stylesheets or browser settings, significantly hampering their reading experience.

Allowing user agents to override styles supports flexibility, inclusivity, and adherence to WCAG 2.1/2.2 guidelines, especially Success Criterion 1.4.12 (Text Spacing).

Rule Description

This rule ensures that inline styles for spacing (line-height, word-spacing, letter-spacing, font-size) do not include !important declarations. The intent is to make these styles easily overrideable by custom user stylesheets, which is essential for accessibility.

The Algorithm (in Simple Terms)

  1. Check all inline styles on text elements.

  2. If a style uses spacing properties (line-height, letter-spacing, word-spacing) and includes !important, it fails.

  3. If the properties are defined without !important, it passes.

  4. Negative or excessively restrictive values may also contribute to a failure if they hinder readability.

Tags:
Share:

Leave A Comment