91Èȱ¬

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 {code}aria-live{/code} area above the form, with {code}aria-invalid{/code} 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

Either:

• Display an error message at the top of a form, indicating the field(s) containing an error, and move focus to the error message when the form is submitted; or
• Display the error message and the field(s) containing the error message in an alert box.

iOS Example (Objective-C)

Error message at the top of the form:

- (IBAction)mySubmitButtonTouched:(UIButton *)sender {
 [errorLabel.text = "The following errors were found: [list]"];
  dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 1 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
    UIAccessibilityPostNotification(UIAccessibilityAnnouncementNotification, self.errorLabel.text)
});
}

Error message in a dialog box:

- (IBAction)mySubmitButtonTouched:(UIButton *)sender  {
 UIAlertView *messageBox = [[UIAlertView alloc] initWithTitle: NSLocalizedString(@"Error", @"Alert box title") message: @"You must enter an email address", @"Alert box message" delegate:nil cancelButtonTitle: NSLocalizedString(@"OK", @"Accept button title") otherButtonTitles:nil];
[messageBox show]; 
}

---

Android

Provide inline error messages by wrapping the form field in a TextInputLayout class (making sure to apply the app:errorEnabled attribute to the container). To show the error, call the setError method on this layout.

Android Pass Example

<android:support.design.widget.TextInputLayout
  android:id="@+id/text_input_layout"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  app:errorEnabled="true">
  <android.support.design.widget.TextInputEditText
    android:id="@+id/myName"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Name"
    android:contentDescription="Name (Required)"/>
</android:support.design.widget.TextInputLayout>

To display the error:

TextInputLayout nameError = (TextInputLayout) findViewByID(R.id.myName);
nameError.setError("Error: you need to enter a name");

Additionally, display the list of all error messages in an alert box which appears when the user presses the Submit button. When the dialog box is dismissed, place focus on the first form field containing an error.

---

HTML

When a user submits a form containing incomplete or incorrect data:

To prevent the user from missing required fields in the first place, apply the aria-required attribute to required field(s), and set this attribute to true. Move focus to the affected field, or the first affected field if more than one error has been made, immediately after the user activates the submit button. Apply the aria-describedby attribute to the affected field(s) to associate the field with the related error message. Apply the aria-invalid attribute to affected form field(s), and set the value to true.

HTML Pass 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>  

<!-- Inline error messages -->
<label for="yourName">Name:</label>
<input id="yourName" aria-invalid="true" aria-required="true" aria-describedby="yourNameError" type="text">
<span id="yourNameError" tabindex="-1">Error: Please enter your name</span>

---

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;
   • The error message is visible;
   • The error message is audible.
4. Verify that the alert or error notification clearly indicates the fields needing correction.

Outcome

The following checks are all true:

• The presence of an error or alert is indicated;
  • the error is visible;
  • the error is announced by a screen reader.
• Alerts and error notifications provide sufficient information to allow users to identify which form controls contain errors.

---