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

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

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)

How AudioEye Helps

AudioEye will alert Managed customers when 3.3.3 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.

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.

Recent Morey Creative Studios Blog Articles