Making Your HubSpot Website WCAG 2.1 Compliant

1.4.4 Resize Text

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.4 Resize text

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

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

View Official WCAG 2.1 Compliance Techniques

  • This criteria is completely resolved with accessiBe or HubSpot.

Understanding

"Help people with low vision by letting them increase text size in content so that they can read it"

This criteria ensures that the user has the ability to scale text to at least 200% so that it can be read by people with mild visual disabilities without the use of assistive technology such as a screen magnifier. All content can be scalable but text is the most important.

The criteria is resolved when text can be scaled up to 200% and is a reasonable amount due to support of a wide range of designs and layout and complements 

 

Solutions

Recommended Solution: AccessiBe

AccessiBe provides an option within their widget to allow users to adjust text size up to 200%.

1.4.4-Resize-text

Sufficient and Additional Techniques:

  • Provide controls on the web pages that allow users to change the size of all text
  • Provide large fonts by default
  • Avoid Justifying text
  • Use page-percent for container sizes
  • Avoid using text in raster images


For More information on additional techniques

 

Warnings

One thing to note is that when a user scales the text size too high, they may start to introduce usability problems. 

  • Images of text do not scale with the accessiBe widget and would require using html text instead.
  • Increasing text size up to 200% may crop or obscure the text, so overflow needs to be set.

 

 

For more information: W3 - Understanding Resize Text

For more information, please visit the official W3C article: Understanding 1.4.4 Resize Text


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