Technique C36:Allowing for text spacing override

Applicability

Content using technologies that support CSS.

This technique relates to 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.

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.

/* 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>

Related Techniques

• Allowing for text-spacing for non-wrapping content

Tests