Website Accessibility Guide Home

1.4.12 Text Spacing

MCS Accessibility Team

MCS Accessibility Team
Last Updated July 23, 2020

The following directions are part of a full step-by-step guide to making a HubSpot website WCAG 2.1 AA compliant. These recommendations are intended for websites managed on the HubSpot CMS but can be adapted for other content management systems.

LEVELAA
Principle: Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
Guideline: Distinguishable
Make it easier for users to see and hear content including separating foreground from background.

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.

View Official WCAG 2.1 Compliance Techniques

Understanding 1.4.12 Text Spacing

This criteria ensures that the user has the ability to adjust line height to at least 1.5 times the font size, letter spacing to at least 0.12 times the font size, and word spacing to at least 0.16 times the font size.

There should be no loss of content or functionality from updating these style properties.

The CSS letter-spacing property helps developers control the amount of white space between characters

The CSS line-height property helps developers control the amount of white space between lines

Sufficient and Additional Techniques:

  • Provide controls on the web pages that allow users to change the spacing and height of all text
  • Allow text spacing without wrapping

Warnings

When designing your site, allow for text spacing without wrapping, 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.

For more information, please visit the official W3C article: Understanding 1.4.12 Text Spacing

Next Article: 1.4.13 Content on Hover or Focus

Questions?

Let us know if we can help you address this specific WCAG Recommendation.