Making Your HubSpot Website WCAG 2.1 Compliant

3.3.3 Error Suggestion

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

3.3.3 Error Suggestion

  • Resolved
  • Partially Resolved
  • Manually Managed
  • N/A - Level AAA
Principle: Understandable
Information and the operation of user interface must be understandable.
Guideline: Input Assistance
Help users avoid and correct mistakes.

If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.

View Official WCAG 2.1 Compliance Techniques

  • This criteria is not resolved with accessiBe or HubSpot and requires manual management.

Understanding

The Error Suggestion Success Criterion serves the purpose of assisting people with filling out forms smoothly. Certain form fields have format requirements that may not be evident at first look. This is especially the case for users that have learning disabilities or visual impairments. 

Upon attempting to fill in the a form, if it doesn't go through, and there's no notice of what the cause of the problem was, an impaired individual may have difficulty figuring out the solution and may not be able to successfully submit the form.

This Success Criterion requires an appropriate error notification to appear if a field is filled in incorrectly. This way the user will have clear instructions on how to fix this error.

For example: If a form requires a user to enter their phone number, a user may enter it as such:

Screen Shot 2020-02-27 at 10.53.06 AM

If this form field requires that only numbers are used and no additional characters, this will cause an error when trying to submit the form as the phone number above also includes parentheses and a dash.

To remedy this, and fulfill the success criteria, adding an error message underneath in a succinct manner will advise the user how to remedy the issue and submit the form successfully. So in this example, it would look something like this:

Screen Shot 2020-02-27 at 10.53.24 AM

The only instances that this criterion is not required is if the suggestion would risk data security or serve against the purpose of the input field.

Solution

accessiBe does not provide tools to resolve this issue as it cannot change the way a form is programmed. A developer would need to set up the error messages themselves if they are building their own form.

That being said, HubSpot does offers tools to help with this criteria. 


Two form fields that are text-boxes that typically require a specific format are Email Addresses and Phone Numbers. Try filling out the form below this post. If you don't type in your email address in the correct format, an appropriate error message will appear to show the user how to fix it. This is set up by HubSpot automatically and does not need to be set up by the user. HubSpot also provides automatic error messages for incorrectly formatted Phone Numbers as well as required forms that are left blank.

Screen Shot 2020-02-27 at 10.10.44 AM

The only downside of this is that since this is set up automatically, this error text cannot be adjusted.

Note: An alternative suggestion could be to use HubSpot's Help Text option to include text above the form field describing the required parameter. (This actually applies to and fulfills Criteria 3.3.2 Labels or Instructions)

Screen Shot 2020-02-27 at 11.14.47 AM

The purpose of this success criteria is related to situations where an improper format is used. In most cases, this happens in text-box fields as the user may type in anything they please. While this works well for Name fields, errors can become common in situations where a specific format is required but the field to fill it out is open-ended. HubSpot offers numerous types of form fields to choose from that would require a specific format thus preventing any deviation. 

Screen Shot 2020-02-27 at 11.19.40 AM

So for example, if a form asks for a user's birthdate, if simply given a blank text box, may enter the date in many different ways: MM/DD/YY, MMDDYYYY, DDMMYY, etc. 

By using HubSpot's Date Picker,  the developer will not have to worry about specifying one format over another since the user will simply be required to select a date on a calendar - the formatting set up automatically within the form.

Screen Shot 2020-02-27 at 11.21.35 AM

While HubSpot doesn't resolve this criterion entirely, it provides robust features to limit the possibility of non-compliance.

 

For more information, please visit the official W3C article: Understanding 3.3.3 Error Suggestion


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