1.4.12: Text Spacing

The Text Spacing guideline under WCAG 2.1 ensures that web content remains readable and accessible when users adjust the spacing of text. This guideline specifies that users should be able to override the default text spacing without losing content or functionality. The adjustments should include:

  • Line height (line spacing) to at least 1.5 times the font size
  • Spacing following paragraphs to at least 2 times the font size
  • Letter spacing (tracking) to at least 0.12 times the font size
  • Word spacing to at least 0.16 times the font size

Importance of 1.4.12: Text Spacing Success Criterion

Text spacing is critical for making web content accessible to a wide range of users, including those with:

Visual impairments:
Adjusting line height and spacing can make text more readable by reducing crowding.
Dyslexia:
Increased spacing between letters, words, and lines can help mitigate reading difficulties associated with dyslexia.
Cognitive impairments:
Adequate spacing can reduce cognitive load, making it easier to focus on and comprehend the text.

Primary Use Cases and Requirements Under Guideline 1.4.12: Text Spacing (Level AA)

Adjusting Line Height

Scenario: Users with visual impairments need increased line height to read text comfortably.

Example: A blog post where users can increase the line height to 1.5 times the font size.

Implementation:


body {
    line-height: 1.5;
}

Paragraph Spacing

Scenario: Users with cognitive impairments require additional spacing between paragraphs to differentiate sections of text.

Example: An article where paragraph spacing can be adjusted to 2 times the font size.

Implementation:


p {
    margin-bottom: 2em;
}

Letter Spacing

Scenario: Users with dyslexia benefit from increased letter spacing to enhance readability.

Example: An educational website where letter spacing can be increased to 0.12 times the font size.

Implementation:


body {
    letter-spacing: 0.12em;
}

Word Spacing

Scenario: Users need additional space between words to prevent them from blending together.

Example: A news site where word spacing can be set to 0.16 times the font size.

Implementation:


body {
    word-spacing: 0.16em;
}

Remediation Tips and How to Implement

Use Relative Units: Implement text spacing using relative units (em, rem) instead of absolute units (px) to ensure scalability.


body {
    line-height: 1.5em;
    margin-bottom: 2em;
    letter-spacing: 0.12em;
    word-spacing: 0.16em;
}

Test with Real Users: Conduct usability testing with individuals who have visual and cognitive impairments to ensure that text spacing adjustments improve readability and accessibility.

Provide User Controls: Offer user controls or settings on your website to allow users to adjust text spacing according to their needs.

Ensure Compatibility: Verify that your website maintains functionality and readability across different browsers and devices when text spacing is adjusted.

CSS Overrides: Allow CSS overrides for users who use browser extensions or custom stylesheets to adjust text spacing.

Testing Text Spacing: To test text spacing compliance on your website, you can use the bookmarklet provided by Steve Faulkner. This tool allows you to quickly apply text spacing adjustments and verify that your content remains accessible and readable.

Text Spacing Bookmarklet - Add this bookmarklet to your browser to test text spacing on any webpage.