Text spacing
Tests increased spacing between letters, lines and paragraphs.
Use to test
Impairments this tool can test for:
How to use
Drag the text spacing link to your bookmark bar to install the tool.
Once the tool is installed, visit a webpage and select the tool in your bookmark bar.
Meeting WCAG criterion
Text spacing is a Level AA WCAG criteria. The criteria stipulates that when increasing text spacing, there is no loss of content or functionality.
The following settings must be able to be set and users should lose no access to content:
- line height (line spacing) to at least 1.5 times the font size
- spacing following paragraphs to at least 2 times the font size
- letter spacing (tracking) to at least 0.12 times the font size
- word spacing to at least 0.16 times the font size
These settings can make content on the screen much easier to read for some users.
Some people with dyslexia and other cognitive disabilities often find it easier to read and understand content that has been given spacing.
Example of using text spacing
Below is an example of the bookmarklet being used on Get into Teaching.
Before
View larger image in a new tab
After
View larger image in a new tab
Fixing text spacing issues
Sometimes when text spacing properties are applied to a webpage content can become lost or functionality can be lost.
For example, if placeholder text has been used within a form, this can often become lost or obscured due to the increased text space.
To fix this, always use a visible label rather than placeholder text.
Another example is when text spacing is applied and text containers do not expand with the content, which means that text overflows the container.
This can be because the height of the div containing the text is set using pixels (px), so it does not expand with the content. Setting div height in relation to font height using 'em,' or not setting div height at all, would prevent the text from overflowing the div.