Making Your HubSpot Website WCAG 2.1 Compliant

3.2.2 On Input

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.

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 partially resolved and/or detected with AudioEye Managed but may require some manual intervention and/or collaboration with AudioEye.

Understanding 3.2.2 On Input

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. 

How AudioEye Helps

AudioEye automatically applies the necessary fixes to provide advanced warning when opening a new window. 

When content changes, alerts or warnings are not triggered when a component receives input, AudioEye will alert Managed customers when 3.2.2 violations are detected and can take action with customer approval. However, for instances where Managed customers do have full control to remediate the source issue, AudioEye will collaborate with accessibility stakeholders to instruct them on what specific changes are required, why the changes are important, and how the changes can be implemented.

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. 

Screenshot of a form field asking "What type of business do you work for?" with a dropdown and update selection button

  • Explain the change that will occur when a select option is made. 

Screenshot of a form field asking "What type of business do you work for?" with a message explaining you'll be redirected upon completing form field

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