WCAG 2.1 – What is Text Spacing?

We’re continuing our series looking at the new Success Criteria in WCAG 2.1. In this post, we’re looking at Text Spacing.

Reading is one of the great pleasures of life. It allows us to communicate with each other, to record our thoughts and learn new ideas. The internet has furthered this cause by giving rise to more opportunities for reading and learning.

A book and an eReader

The problem with text spacing?

Some people with cognitive disabilities may have difficulty with reading, and is quite unique to the individual. With some users, letters may switch around, other users may find that lines blur together, while others may have another issue in reading. An example of this can be Visual Stress, where users struggle in particular to read text and fatigue quickly.

To help them with reading text, end users have a variety of tools that may help them to separate letters, words, lines and paragraphs to break up the text as they desire to make the text easier to read.

These text spacing tools may be part of browser settings or another assistive technology that work through other computer programmes. In order to bring a consistency to the issue of text spacing, the WCAG guidelines now include a Text Spacing criterion.

1.4.12 – Text Spacing (Level AA)

The WCAG guideline on Text Spacing states:

In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

  • 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.

Exception: Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.

We can see that the guidelines give clear instructions regarding line spacing, spaces between letters and between paragraphs. However, these figures are not the spacing that must be implemented, but rather the spacing that can be implemented by a user. Users can control how text appears on the page using browser tools or applying CSS styles. Having control over text appearance can make a big difference to some users. It’s important for designers and developers to make sure that the end user can have this control.

This idea of spacing may seem very confusing as we might not understand or visualise what it would look like for text to be in these measurements.

In the example below, we can see what text can look like when it has been changed by a user. To most users the image on the right does not look correct, but to those with cognitive disabilities it may help them by breaking up the text into easier readable segments.

An example of text spacing on a webpage

We can also see that when the user-defined text rendering is implemented, the text has taken up more space and this has pushed the images down to be lower than they were before. This shows that the website is responsive and is matching the space needed for the text to its requirements.

Other Considerations

The image below provides an example of one of the considerations for text spacing. Some of the text is obscured and hidden, which doesn’t help the reader. While on the rest of the website the text spacing option would pass, this third party content fails. Some text is obscured when text spacing is turned on

Related Guidelines

The responsive parts of a website automatically extend their space to allow the text to fit it appropriately but these unresponsive sections have a fixed size, and this is preventing the text from being read clearly when the text spacing is increased. This is connected to the WCAG criterion Reflow which looks at the issue of changes to web content by the user and ensuring that all content can still be accessed correctly.

Conclusions

Some users benefit from having larger spaces between letters, words, lines and paragraphs of text. The WCAG guidelines give specific sizes and the text must remain readable and must not be hidden or obscured from other content.

The text spacing success criterion in WCAG 2.1 doesn’t mean that all text must be formatted in the measurements set out in the criterion, but must adapt to the user changing the size of the text as they require.

Text Spacing and your website

If you are unsure about whether text spacing meets the criterion feel free to contact Dig Inclusion and discuss how we can help you make your website accessible.