Skip to content

Technique C36:Allowing for text spacing override

About this Technique

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

This technique applies to content using technologies that support CSS.

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

The CSS

<style>
/* CSS: No height property is set.*/
</style>

The HTML

<div class="card">
  <img alt="" src="image.png">
  <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.

Back to Top