Understanding WCAG SC 1.4.12 Text Spacing
Version and Level: 2.1/2.2 (Level AA)

Success Criterion 1.4.12 Text Spacing requires that content can be presented without loss of functionality or content when users adjust text spacing. This includes line height, paragraph spacing, letter spacing, and word spacing.

Benefits:

  1. Improved Readability for Low Vision Users: Allows users to adjust text spacing to enhance readability.
  2. Enhanced Accessibility for Cognitive Disabilities: Provides flexibility in text presentation, aiding users with cognitive challenges.
  3. Maintained Functionality: Ensures that content remains functional and legible when text spacing is adjusted.

Main Objective:

To meet the SC standards, we need to ensure that the website's content remains unchanged, with no loss of text or content while adjusting to the following:

  • Maintain a line spacing of at least 1.5 times the font size.
  • Adding space after paragraphs equivalent to at least double the font size.
  • Letter spacing (tracking) to at least 0.12 times the font size.
  • Set word spacing to at least 0.16 times the font size.

Best Practices:

  • Use flexible containers in CSS: Use flexible containers in CSS styles instead of fixed ones so your design adjusts well on different screens.

  • Allow text spacing without wrapping: Allow text spacing without wrapping by using relative units on the container. If a fixed width is applied, ensure that an additional 20% of the container's width is left to accommodate growth.

  • Ensure smooth content flow: Make sure your content flows smoothly without any text overlapping or getting cut off.

  • Stick to relative units for consistency: Stick to relative units for font size, line spacing, and spacing between elements for consistency and flexibility (i.e., percentage for containers, em's for fonts).

Examples & Explanation:

Example: A paragraph expands vertically within its container when text spacing is adjusted.

What Should Be Avoided

HTML/CSS

              <style>
                .card {
                  border: 1px black solid;
                } 
                .card p {
                  line-height: 1.5;
                  margin-bottom: 2em;
                  letter-spacing: 0.12em;
                  word-spacing: 0.16em;
                }
              </style>
              
              <div class="card" style="height: 200px; width: 100px;">
                <h3>Heading</h3>
                <p>This is a long paragraph of text that may get cut off if the height is fixed and text spacing is adjusted.</p>
              </div>

Explanation:Setting a fixed height for the container may result in text being cut off or overlapping when users adjust text spacing properties, making it difficult to read.

What Should Be Done

HTML/CSS

              <style>
                .card {
                  border: 1px black solid; 
                } 
                .card p {
                  line-height: 1.5;
                  margin-bottom: 2em;
                  letter-spacing: 0.12em;
                  word-spacing: 0.16em;
                }
              </style>
              
              <div class="card">
                <img src="image.png" alt="proper alt text">
                <h3>Heading</h3>
                <p>This is a long paragraph of text that will expand vertically as needed when text spacing is adjusted.</p>
              </div>

Explanation:By not setting a fixed height and using relative units for line height, paragraph spacing, letter spacing, and word spacing, the paragraph can expand vertically within its container. This ensures that the content remains legible and functional when text spacing is adjusted.

Next Up

Expand your knowledge with SC 1.4.13 - Content on Hover or Focus. Learn to ensure hover or focus content is accessible for all users.

Go to SC 1.4.13