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.

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.

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