Making Your HubSpot Website WCAG 2.1 Compliant

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. In addition to explaining the WCAG Success Criteria and how to address them, this guide also describes how the AudioEye Managed solution may address each issue.

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 consistently resolved with AudioEye Managed.


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

How AudioEye Helps

AudioEye provides an option within their Visual Toolkit to allow users to adjust text spacing.

Screenshot of AudioEye Visual Toolbar with text spacing selected

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

The AudioEye Visual Toolkit can adjust the formatting of a website, but it is not intended as a replacement for making the necessary visual improvements that help ensure an optimal visual experience for individuals with disabilities. AudioEye collaborates with Managed customers to assist them in identifying and understanding visual accessibility issues. 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


Download the WCAG 2.1 Compliance Checklist

Checklist Download

Questions?

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

Recent Morey Creative Studios Blog Articles