Main content

Error Alerts

Must

Section 508:

  • §1194.21(l)
  • §1194.31(a)
  • §1194.31(b)

WCAG 2.0:

  • 3.2.4
  • 3.3.1

A clear and consistent indication of an error must be provided that does not rely on a single sensory characteristic

When an error condition occurs users must be able to identify the error condition and be given information on how to correct the error condition. Error indications must not depend on a single sensory characteristic (sight, sound, color, etc.).

Notifications, alerts, and error messages to the user should be provided in a consistent format. To increase functional access, a single method for each type (form error, alert, and notification) should be used across an application or site. By doing so, users with disabilities will be able to recognize and anticipate the messages.

When error indication is not consistent users who are blind, have low vision, or who have a cognitive impairment may have difficulty responding to the error, notification, or alert.

Note: This standard only requires that each type of user facing message is consistent within the same category. For example, error messages within an application must be implemented in the same consistent manner. However, error messages and notifications do not have to implemented in the same way within an app or site.

iOS Example

Error: The following errors were detected in the form:
<ul>
<li>Please enter a value for the first name field</li>
<li>Please enter a phone number using the (Country Code) - (Dialing
Prefix) - (Dialing Suffix) format</li>
</ul>

iOS Failure

Error: The form is invalid - please correct the issues and submit it again.

Android Example

Error: The following errors were detected in the form:
<ul>
<li>Please enter a value for the username field</li>
... </ul>
// use of setError with contentDescription display errors    
public void btnClick(View v)  
    {  
        if(...)  
        {  
            editText.setError("Incorrect username");  
		  editText.contentDescription("Re-enter the username: it must match
the other username you entered"); 
		  editText.requestFocus();
        }}

Android Failure

Error: The form is invalid - please correct the issues and submit it
again.

// use of setError only to display errors    
public void btnClick(View v)  
    {  
        if(...)  
        {  
            editText.setError("Incorrect username");  
        }  
    }

HTML Example

There should be one consistent (and accessible) method of providing alerts.

HTML Failure

Multiple implementations of errors/alerts are offered, some accessible,
others not, such as:
<ul>
 <li>JavaScript pop-up dialogs</li>
 <li>Errors at the top of forms</li>
 <li>Form fields not filled out correctly have their text color
changed to red</li>
 <li>No error indication at all (a minimalist UI choice favored by
some developers)</li>
 <li>Errors displayed in a different part of the screen or in a
read-only status/help form field</li>
</li>

Remediating

Choose and implement a single method to display error messages and other alerts to the user. Do not use color-dependent error messages. If pop-up windows (such as JavaScript alerts) are used, their accessibility should be verified using assistive technologies. (Note that script-based alerts, even if they are accessible, may not be compliant with some accessibility standards.)

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. Developers should ensure that all forms provided clearly identify individual fields in error and provide instructions on how to address the errors of individual fields. The error message should not be formatted to be only identifiable using a specific sensory characteristic such as sight, color or audio.

Testing

Recommended tool/method: Manual

Provide a clear indication of errors (Implied Global)
  1. Open the app with voice commands running
  2. Determine if a form is present
  3. Enter invalid information and submit the form
  4. Verify that the form provides error messages that:
    • Clearly identify specific fields in error
    • Clearly identify the reason the fields are in error
    • Clearly identify how to address the error for each field
  5. Determine if the forms share a single error mechanism
    • Client side error checking via JavaScript and the alert() element
    • Server side checking via server side scripts
More in this category: « Error Prevention Error Messages »