Making Your HubSpot Website WCAG 2.1 Compliant

3.2.2 On Input

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.

LEVELA
Success Criteria

3.2.2 On Input

  • Resolved
  • Partially Resolved
  • Manually Managed
  • N/A - Level AAA
Principle: Understandable
Information and the operation of user interface must be understandable.
Guideline: Predictable
Make Web pages appear and operate in predictable ways.

Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.

View Official WCAG 2.1 Compliance Techniques

  • This criteria is completely resolved with accessiBe or HubSpot.

Understanding

This criteria aims to ensure that behaviors from a form control or data entry are predictable. Some users can be easily distracted when elements of a web page change without their direct input. To minimize these distractions, it's important that all actions that cause a  "change of context" on your web pages are because of direct user request/input. A "change of context" can be simplified as a change in the web page or content, see examples below.

Example:

  • Some forms are designed to submit or open a new window/tab when the user selects a radio button, checkbox, or select option. Users who do not easily perceive changes to a web page/element will not be able to recognize the reason or cause for this change. 
  • Some forms are designed to submit when a user exits the last input field. Users with screen readers and assistive devices may tab out or click out of a field in order to get more information on it, causing the form to submit.

 

How HubSpot Helps

By default, HubSpot forms can only be submitted by, of course, a Submit button. This ensures that users will not be caught off-guard or confused by the form behavior. 

Recommended Solutions

  • Provide a clear submit button for all changes in context. (In Flash and PDF Forms as well)
  • Use a button for select elements so the user knows to expect a change in context. (Image 1)
  • Explain the change that will occur when a select option is made. (Image 2)

 

Form-Selection-with-Update-for-changesImage 1

Form-Selection-with-Message-for-changesImage 2

 

For more information, please visit the official W3C article: Understanding 3.2.2 On Input


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