WCAG (Level AA) SC 1.4.12 Text Spacing

WCAG (Level AA) SC 1.4.12 Text Spacing (w3.org)

Issue description

WCAG 1.4.12, “Text Spacing” aims to improve readability for people with visual or cognitive disabilities by providing sufficient spacing between lines, letters, and words. This guideline recognizes that adequate spacing can significantly enhance the reading experience for many users.

Many websites use cramped text spacing, making it difficult for some users to read and comprehend the content. This can be particularly challenging for individuals with:

Dyslexia: People with dyslexia often benefit from increased spacing between letters and words, which can help them distinguish individual characters and reduce visual crowding.
Visual impairments: Users with low vision may find it easier to read text with increased line height and letter spacing, as it reduces visual fatigue and improves character recognition.
Cognitive disabilities: Some users with cognitive disabilities may have difficulty processing information when text is densely packed. Increased spacing can improve comprehension and reduce cognitive overload.

WCAG requirements

This guideline requires that users should be able to customize text spacing without losing content or functionality. Specifically, users should be able to change:

Line height (line spacing): To at least 1.5 times the font size.
Spacing between letters (letter spacing): To at least 0.12 times the font size.
Spacing between words (word spacing): To at least 0.16 times the font size.

Benefits

Improved readability: Increased spacing makes text easier to read and comprehend for many users.
Reduced visual fatigue: It can help reduce eye strain and headaches, especially for users who spend a lot of time reading on screens.
Enhanced comprehension: It can improve comprehension for users with cognitive disabilities.
Greater accessibility: It makes your content accessible to a wider range of users with visual or cognitive differences.

By adhering to this guideline, you can create a more inclusive and user-friendly online experience for everyone.

Who this issue impacts

Follow the links for additional information on user impairments:

Suggestions for remediation

Remediating WCAG 1.4.12, “Text Spacing” involves ensuring that users can customize the spacing of text to improve readability without losing content or functionality. Here’s how:

Use CSS to control text spacing

Line height: Use the line-height property to control the space between lines of text. Set it to at least 1.5 times the font size.
- Example: line-height: 1.5; or line-height: 24px; (if the font size is 16px)
Letter spacing: Use the letter-spacing property to control the space between letters. Set it to at least 0.12 times the font size.
- Example: letter-spacing: 0.12em;
Word spacing: Use the word-spacing property to control the space between words. Set it to at least 0.16 times the font size.
- Example: word-spacing: 0.16em;

Provide user controls

Customization options: Offer users controls to adjust the text spacing to their preferences. This could be through a dedicated “Accessibility Settings” panel or by integrating with browser settings.
Save preferences: Store the user’s preferences so they don’t have to adjust the settings each time they visit the website.

Avoid fixed spacing

Don’t override user settings: Avoid using CSS or JavaScript that overrides the user’s browser or operating system settings for text spacing.
Flexible layouts: Use flexible layouts that adapt to changes in text spacing without causing content to overlap or become inaccessible.

Test with different settings

Adjust spacing: Test your website with different text spacing settings to ensure that the content remains readable and usable.
Use assistive technologies: Test with screen readers to ensure that changes in text spacing do not disrupt the reading order or create other accessibility issues.

Example

You can provide a set of controls that allow users to:

Increase or decrease line height: Use buttons to adjust the line-height property.
Adjust letter spacing: Use an input field to control the letter-spacing property.
Adjust word spacing: Use an input field to control the word-spacing property.

By implementing these techniques, you can ensure that users have the flexibility to adjust text spacing to meet their individual needs, improving readability and creating a more inclusive online experience.