Website Accessibility Guide

Making Your HubSpot Website WCAG 2.1 Compliant

1.4.12 Text Spacing

MCS Accessibility Team

MCS Accessibility Team
Last Updated November 09, 2019

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. All suggestions in this guide are in conjunction with the accessiBe solution and require an active license. For more information on the accessiBe platform and pricing, you can learn more here.

LEVELAA
Success Criteria

1.4.12 Text Spacing

  • Resolved
  • Partially Resolved
  • Manually Managed
  • N/A - Level AAA
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

  • This criteria is completely resolved with accessiBe or HubSpot.

Understanding

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

Solutions

Recommended Solution: AccessiBe

AccessiBe provides an option within their widget to allow users to adjust word spacing, letter spacing and line height  an infinite amount.


adjusting-text-spacing-wcag-1.4.12

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


For More information on additional techniques

 

Warnings

  • Allowing for text spacing without wrapping
  • Accesibe only allows adjustments by every 10%

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


Download the WCAG 2.1 Compliance Checklist

What to expect if you download this checklist

Video: What to Expect If You Download this Checklist

Checklist Download

Questions?

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

Recent Morey Creative Studios Blog Articles