3.3.3 Error Suggestion: 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. (Level AA)

Requirements

• When a form validation error is detected, a suggestion is provided to help the user correct the issue.

Why is it important?

This helps everyone resolve issues more easily, but especially people with cognitive disabilities who find processing information difficult.

Benefitted disability types

Providing information about how to correct input errors allows users who have learning disabilities to fill in a form successfully. Users who are blind or have impaired vision understand more easily the nature of the input error and how to correct it. People with motion impairment can reduce the number of times they need to change an input value.

Summary

• When someone makes an error while filling in a form, give them suggestions on how to correct it.
• When an error is detected, suggestions for correcting the issue must be provided – unless doing that would compromise security (like giving a hint to a password for example).

Common mistakes

• An error is detected and the user is notified, but no suggestion is given to help them resolve it;
• A login error is detected and a suggestion is provided, but it compromises security by revealing that a particular username exists.

Design Guide

Error Suggestion Example for Android

Setting app:errorEnabled to true in your TextInputLayout allows us to display an error beneath the EditText.

Tip: you can style the error text using app:errorTextAppearance with your preferred style.

<com.google.android.material.textfield.TextInputLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:hint="@string/form_username"
         app:errorEnabled="true"
         app:errorTextAppearance="@style/ErrorText">

     <com.google.android.material.textfield.TextInputEditText
             android:layout_width="match_parent"
             android:layout_height="wrap_content"/>

 </com.google.android.material.textfield.TextInputLayout>

Then, after verification, you can show the error message using setError(String) on your TextInputLayout. You can also clear the error by just sending null to the setError function:

if (hasErrors == true) {
    errorInputLayout.setError("Enter a National Insurance number in the correct format")
} else {
    errorInputLayout.setError(null)
}

Error Suggestion Example for Web

Associating a hint with a text input field using aria-describedby

<label for="national-insurance-number">
  National Insurance number
</label>

<span id="national-insurance-number-hint">
  It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
</span>

<input id="national-insurance-number" name="national-insurance-number" type="text"
aria-describedby="national-insurance-number-hint national-insurance-number-error">

<span id="national-insurance-number-error">
  <span class="visually-hidden">Error:</span> Enter a National Insurance number in the correct format
</span>

References

1. Using aria-describedby to provide form hints by Léonie Watson and The Paciello Group.
2. Practical Support: aria-label, aria-labelledby and aria-describedby section in the W3C’s Using ARIA document.
3. Accessibility Guidelines- Github.io