Content using technologies that support Cascading Style Sheets (CSS).
This technique relates to Success Criterion 1.4.12: Text Spacing (Sufficient).
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.
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.
For elements which contain text that is intended to wrap:
- Set zoom level to 100%.
- 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.
- Check that all content and functionality is available e.g., text in containers is not truncated and does not overlap other content.
- #3 is true.
Where a page has multiple layouts (e.g. in a responsive design) text spacing should be tested in each layout.