Making Your HubSpot Website WCAG 2.1 Compliant

3.3.3 Error Suggestion

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.

LEVELAA
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

Understanding 3.3.3 Error Suggestion

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:

Screenshot of a phone number field on a form

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, 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:

Screenshot of a phone number field on a form with error message that the field must only contain numbers

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.

How HubSpot Helps

HubSpot accounts for error message on default form fields such as Email Address, Phone Number, etc. If a user inputs information in an incorrect format, the default error message will appear. The downside of this is that since this is set up automatically, the error copy cannot be adjusted.

Alternatively, you can 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)

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


Download the WCAG 2.1 Compliance Checklist

Checklist Download

Questions?

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