accessibility-guidelines

This document is in beta. Help us by reporting issues via Github or email

Back to the overview page

Error suggestions

On this page:

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

Requirements

Common mistakes

Why?

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

Official wording in the Web Content Accessibility Guidelines

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)

See the W3C’s detailed explanation of this guideline with techniques and examples.

Guidance for Design

This section needs more content. Contribute via Github or email.

More guidance for design

Guidance for iOS

This section needs more content. Contribute via Github or email.

Guidance 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)
}

Guidance for Flutter

This section needs more content. Contribute via Github or email.

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

More guidance for Web

More info

Sources

Contribute

This document is in beta. Help us by reporting issues via Github or email

This site is open source. Improve this page.