������̳

All users benefit when notifications are communicated clearly and can be perceived in multiple ways. Some users may only perceive in one way, while others will benefit from a combination.

Make notifications visible using standard operating system alerts, inline messages or icons. Make notifications audible using sound bites or ensuring they can be read by assistive technology. And, where possible, make notifications felt by using haptic feedback when appropriate to do so.

Notifications inform and guide users. They can be error messages, alerts, instructions, changes of state, responding to an interaction or a range of other cues.

Content elements change state when their meaning changes during interaction, for example, ‘selected/not selected’, ‘add/added’, or ‘delete/deleted’. Populating an autosuggest, or similar dynamic area, would also be a change of state. Hover and focus states indicate an element is interactive. Icons and avatars are visual cues, and should have supporting audio cues (or “earcons”) when appropriate.

Sounds played from notifications are considered different from sounds played from auto playing content as in guideline ‘Audio and Visual, Autoplay’

---

iOS

Where possible, use standard operating system notifications. From iOS8, UIAlertView is deprecated, and has been replaced by UIAlertController.

iOS Example (Objective-C)

UIAlertController* alert=[UIAlertController alertControllerWithTitle:@"Warning" message:@"Are you sure you want to quite?" preferredStyle:UIAlertControllerStyleAlert];

UIAlertAction* yes = [UIAlertAction actionWithTitle:@"Yes" style="UIAlertActionStyleDefault handler:^(UIAlertAction * action)
{
 // Quit the application
}"];
UIAlertAction* no = [UIAlertAction actionWithTitle:@"No" style:"UIAlertActionStyleDefault handler:^(UIAlertAction * action){
 // Dismiss the alert and do nothing.
}"];
[alert addAction:yes];
[alert addAction:no];
[self presentViewController:alert animated:NO completion:nil];

If standard operating system notifications cannot be used, use the UIAccessibilityLayoutChangeNotification or UIAccessibilityPostNotification properties when making small changes or when changing existing content on a page that do not warrant an alert box (for example, "Document autosaved"). These properties enable VoiceOver to announce the change, but without moving focus, hence preventing the user from losing their place. The related code must be placed inside a DispatchQueue class, or it may not be conveyed by VoiceOver.

Where possible, include an additional audio/haptic cue, for example using Apple's AV Foundation.

-(void) myButtonTouched {
 [notificationLabel.text:@"[updated text]"];
 dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 1 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
    UIAccessibilityPostNotification(UIAccessibilityAnnouncementNotification, self.notificationLabel.text)
}); 
}

If the notification represents a new view that takes up a significant part of the screen, use UIAccessibilityScreenChangedNotification. Unlike in the above example, VoiceOver focus will automatically move to the first accessible element within the new view.

-(void) myButtonTouched {
 [notificationLabel.text:@"[updated text]"];
 dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 1 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
    UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, nil)
}); 
}

---

Android

Use standard operating system-level alerts within native Android applications. Avoid the use of custom alerts and notifications, as there is no easy way to make them accessible, and also lack the familiarity offered by native alert messages.

Use AlertDialog to display an alert or notification.

Android Pass Example

AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("Error");
builder.setMessage("My error message");
builder.setCancelable(true);
builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
  dialog.cancel();
  }
});
AlertDialog alert = builder.create();
alert.show();

---

HTML

HTML5 introduced a dialog element to simplify the approach of creating and managing dialog boxes. Unfortunately, at the time of writing, support for this element across mobile and desktop browsers is limited. Therefore, for the moment, use scripting to develop a custom dialog box, or use a library such as jQuery which contains a dialog box implementation.

When creating a dialog box, make sure that the following design pattern is followed:

HTML Pass Example

<div id="saveNotification" role="status"><p>Document saved</p></div>

JavaScript may be used for displaying simple, standard, operating system-level notifications. For example, the alert box can be used to present error or warning messages.

 <button onclick="displayAlert();">Save</button>

  <script>
  function displayAlert() {
    alert("Document saved");
  }
  </script>

---

Testing

Procedures

1. Activate the app without a screen reader.
2. Complete forms and trigger error messages within the app.
3. Locate any cues used to signal error states or form completion.
4. Verify that additional cues exist (text or visual, audio, or vibration) to provide the same information that was conveyed.
5. Start the screen reader.
6. Focus on an individual object, element, or control that can change state.
7. Verify that the announced item label matches the on-screen text or contains additional supplementary information to assist with non-visual access of the item.
8. Verify that the state of the element is announced properly.
9. If applicable, toggle the state of the item and verify that the screen reader announces the correct state change.

Outcome

The following checks are true:

• The app provides both visible and audible cues for each alert or notification used to convey information or errors;
• Object, elements, or controls including their labels, roles, values, states and state changes are correctly announced by a screen reader.

---