Making Your HubSpot Website WCAG 2.1 Compliant

3.3.1 Error Identification

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.3.1 Error Identification

  • 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, the item that is in error is identified and the error is described to the user in text.

View Official WCAG 2.1 Compliance Techniques

  • This criteria is consistently resolved with AudioEye Managed.

Understanding 3.3.1 Error Identification

As a developer you have to ensure that any users are made aware of any errors that occur and that they can determine what it is.  The error message should be as specific as possible. Just to keep in mind, error messages that popup upon form submissions is not enough for certain users to perceive that an error has occurred. Users with screen readers may not necessarily know there is an error until they come across the error indicator.

There are two different type of situations for this criteria:

  • Information submitted by the user that are required 
  • Information submitted by the user that doesn't meet the required values.

Regarding the second point above, if a user enters a value that doesn't meet the required values and the form automatically changes the value to fall within the range. The error message would still need to be provided to the user as required by this criteria. An error description letting the user know of the changed value would meet the 3.3.1 criteria as well as criteria 3.3.3 (Error Suggestion) 

How AudioEye Helps

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

There are few ways to ensure that your website remains compliant.

Screenshot of form showing an error message that a form field is not completed

For forms with required fields:

  • The developer needs to program an alert or message of any errors that is shown to the user upon form submission if there are any. In the example, shown to the right a label that states "Please complete this required field" in red is sufficient for this criteria.
  • HubSpot on their forms program in the aria role="alert" on the error label text.
  • If form fields aren't filled, In addition to displaying the error, you should highlight the fields for easier scanning.

    <ul role="alert">
     <li> <label class="hs-error-msg"> Please complete this required field.</label> </li>
    </ul>
       

For form fields that require specific data or values:

  • Again, the developer should provide context as specific as possible. In the example below "Please enter a phone number at least 7 numbers long and can contain only certain characters."
  • HubSpot on their forms program in the aria role="alert" on the error label text

Screenshot of a form showing an error message that a phone number is incorrectly entered in a form field

For more information, please visit the official W3C article: Understanding 3.3.1 Error Identification


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