Error messages and correction

Must

Clear error messages must be provided.

Description

Clear error messages help everyone to input and interact with content correctly. It is important to provide inclusive error messages that users of assistive technology can perceive. Keep in mind that not everyone sees visual cues, such as colour or icons. And people with cognitive impairments may have difficulty in understanding how to correct errors.

When errors can be detected programmatically, provide clear informative messages that succinctly tell the user where the error is and suggestions, tips or instructions on how to correct it. Ensure it is easy for the user to return to the input/control that needs correcting, and other content.

For example, on a form submission, a list of all fields needing correction could be added to an aria-live area above the form, with aria-invalid and inline visual cues to provide guidance. Be careful to avoid a keyboard trap and use ARIA or standard operating system notifications for users of assistive technology, such as screen readers.

IOS

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

iOS example

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â));                        

After the form is submitted focus the error label:

[errorLabel setText(@"Check your form again");                        

ANDROID

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

Android example

Use of setError with contentDescription display errors:

// 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();
        }}                        

Use of setError only to display error:

public void btnClick(View v)  
    {  
        if(...)  
        {  
            editText.setError("Email fields do not match");  
        }  
    }                        

HTML

Display an error message at the top of the form, with an appropriate level heading and indication of the fields in error. Move focus to the error message after a failed submission.

HTML example

<!-- added and given focus on submission -->
<h? id="errors">Errors were found</h?>
<ul>
    <li>"Re-type email address" field does not match "email address".</li>
    <li>"I agree" checkbox is not checked.</li>
</ul>
<form>...</form>                        
<!-- added on submission -->
Fix the items marked below in red
<form>...</form>                        

TESTING

 

Procedures
  1. Activate the app.
  2. Trigger an alert or error on an object, element, or control in the app.
  3. Verify that an alert or error indicates there is an error.
  4. Verify that the alert or error notification clearly indicates the fields needing correction.
Results

The following checks are all true:

  • The presence of an error or alert is indicated;
  • Alerts and error notifications provide sufficient information to allow users to identify which form controls contain errors.