Allowing for text spacing override

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.

Applicability

Content using technologies that support Cascading Style Sheets (CSS).

This technique relates to Success Criterion 1.4.12: Text Spacing (Sufficient).

Description

The objective of this technique is to allow a user to override text spacing via user stylesheet, bookmarklet, extension, or application. Increased spacing between paragraphs, lines, words, and characters benefits people with low vision or some cognitive disabilities. Content needs to allow spacing changes without loss of content or functionality, so text containers must either have room for the text to expand or the container must be able to expand. This technique will typically apply to short strings of text such as in a navigation bar, as longer strings of text are increasingly likely to require wrapping to be readable when styles are changed.

Where text-content can wrap within its container authors should

In English languages, if authors do not set the CSS height property, it can help ensure paragraphs expand. Paragraphs need to allow text to increase vertically for languages or scripts such as English which are read horizontally or to increase horizontally for languages or scripts which are read vertically.

Examples

When a user adapts the page to increase the text spacing, text fits within the bounds of its containing box.

Example 1: A paragraph expands vertically within container

/* CSS: No height property is set.*/

<!-- HTML -->
 <div class="card">
  <img src="image.png" alt="proper alt text">
  <h3>Heading</h3>
  <p class="lede">Long lede paragraph…</p>
 </div>

None of the paragraphs on this page have a height specified, so all are effectively using this technique.

Tests

Procedure

For elements which contain text that is intended to wrap:

  1. Set zoom level to 100%.
  2. Use a tool or another mechanism to apply the text spacing metrics (line height, and paragraph, letter, and word spacing), such as the Text Spacing Bookmarklet or a user-style browser plugin.
  3. Check that all content and functionality is available e.g., text in containers is not truncated and does not overlap other content.

Expected Results

  • #3 is true.
Note

Where a page has multiple layouts (e.g. in a responsive design) text spacing should be tested in each layout.