Clear error messages must be provided along with suggestions for correcting the error

When error messages are not clear or do not identify fields in error – users of assistive technology may not be aware that an error occurred. Provide informative error messages and a means of navigating away from an error message back to useful information. Providing text at the top of the form, describing errors and highlighting where the errors are generally does this. 

Suggestions must be provided for error messages when suggestions are known and when giving a suggestion would not invalidate the purpose of the field. When a notification of an error is provided, some users with cognitive impairments may not know how to correct the error. Suggestions may also allow users with visual and mobility impairments to complete the form before giving up, as suggestions will allow them to correct the error without multiple error attempts. Multiple attempts can take many steps and users can give up if re-entering data is overwhelming.

Tips

• The term “Clear indication of errors” is generally understood to mean that a list of the fields and errors are displayed at the top of the form. The error should be focused on submission or an alert should be displayed identifying the fields in error. It is helpful but not required to provide a method to jump to the fields in errors using links to or symbols.
• Indicating errors as the user navigates may not be detected by a screen reader without moving focus. Focus traps should be avoided.
• Use pop-up alerts when it is not possible to bring attention to an error using a screen reader.

iOS

Indicate an error message at the top of a form with indication of fields in error and focus the message on form submit or display an alert pop-up. Make the error label a first responder and display the errors below.

iOS Example

Example 1:
After form is submitted focus the error label:
[errorLabel setText(NSLocalizedString(@"Errors were found", @"Label text"));
 UIAccessibilityPostNotification(UIAccessibilityLayoutChangedNotification, errorLabel); [errorLabel1 setText(NSLocalizedString(@"Email address fields do not match", @"Error explanation text"));
Example 2:
A form that when submitted with an error has an error appear at the top of
the form indicating that there was an error in the password field and
criteria are given telling the user that the password must be eight
characters long and contain a capital letter, alpha-numeric characters, at
least one numeral, and at least one special character (#,$,^,!,or @)

iOS Failure

Example 1:
After the form is submitted focus the error label:
[errorLabel setText(@"Check your form again"); 

Example 2:
A form that when submitted with an error has an error appear at the top of
the form indicating that there was an error in the password field but no
suggestions are given about what criteria are necessary for a password.

Android

Indicate an error message at the top of a form with indication of fields in error and focus the message on form submit or display an alert pop-up.

Android Example

Example 1:
// use of setError with contentDescription display errors  
public void btnClick(View v)  
    {  
        if(...)  
        {  
            editText.setError("Email fields do not match");  
		  editText.hint("Re-enter the email address: it must match the other email address you entered"); 
		  editText.requestFocus();
        }}

Example 2:
A form that when submitted with an error has an error appear at the top of
the form indicating that there was an error in the password field and
criteria are given telling the user that the password must be eight
characters long and contain a capital letter, alpha-numeric characters, at
least one numeral, and at least one special character (#,$,^,!,or @).

Android Failure

Example 1:
Use of setError only to display error:
public void btnClick(View v)  
    {  
        if(...)  
        {  
            editText.setError("Email fields do not match");  
        }  
    }

Example 2:
A form that when submitted with an error has an error appear at the top of
the form indicating that there was an error in the password field but no
suggestions are given about what criteria are necessary for a password.

HTML

Display an error message at the top of the form and indicate the fields in error. Move focus to the error message after page load and indicate the error message as a heading with an appropriate level.

HTML Example

Example 1:
<!-- after submission -->
<h4><a name="Errors" tabIndex=-1">Errors were found</a></h4>
<ul>
<li>Re-type email address field does not match the email address</li>
<li>The I agree checkbox is not checked</li>
</ul>
<form>...</form> 

Example 2:
A form that when submitted with an error has an error appear at the top of
the form indicating that there was an error in the password field but no
suggestions are given about what criteria are necessary for a password.

HTML Failure

Example 1:
<!-- text placed after the submit button-->
Fix the items marked below in red
<form>...</form> 

Example 2:
When a form is submitted, a password field error appears at the top of the
form but does not indicate what the criteria are for a correct password.

Remediating

Developers only have to provide suggestions if the error is automatically detected. Developers should provide suggestions to the user on what information should be entered in the form field that was found in error. This can be in the form of specific examples or the format of information that is required. This information should be provided at the top of the form where the error message is indicated and described.

Developers are not required to allow the user to move focus from the error message to the form field although this is very helpful to many users with disabilities.

Developers should not provide suggestions for errors when providing that information would jeopardize the purpose of the form input.

Testing

Recommended tool/method: Manual

Provide suggestions for error messages when known (Implied Global)

1. Open the module
2. Determine if the module contains a form
3. Submit invalid sample data and determine if the form detects errors automatically
4. Verify that the error messages:
   1. Provide suggestions on the format of the input required or
   2. Provide suggestions on sample input that is required