Inclusive notifications

Must

Notifications must be both visible and audible.

Description

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.

IOS

To provide notifications in an inclusive way, combine a displayed message or image with an accessibility label, vibration, an audio tone and perhaps a screen flash.

Where available a trait should be used to indicate state. If a custom state is desired it should be added to the accessibility label. Standard objects will set state automatically for states that are known, however if a state is unknown to the control or used in a non-standard way an accessibility trait must be explicitly set, for example a checkbox could have the trait of 'selected' assigned to it.

iOS example

// Required Name field that must be 8 characters or less
UITextField* textField = [[UITextField alloc] initWithFrame:CGRectMake(30, 10, 400, 50)];
[textField setAccessibilityLabel:@"Username (8 character maximum)"];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 400, 50)];
[label setText: NSLocalizedString(@"Username", @"Label title")];
[textField addTarget:self action:@selector(textFieldDidChange:) forControlEvents: UICOntrolEventEditingChanged];
...
(void) textFieldDidChange:(id)sender {
  // change label
  [label setText: NSLocalizedString(@"Username must be 8 characters or less", @"Error message put into label")];
  // play sound
  // vibrate
}
...
[aCheckBox setAccessibilityLabel:NSLocalizedString(@"One", @"Button title")];
[aCheckBox setAccessibilityTraits:UIAccessibilityTraitSelected | UIAccessibilityTraitButton];                        
UITextField* textField = [[UITextField alloc] initWithFrame:CGRectMake(30, 10, 400, 50)]];
[textField setAccessibilityLabel:@"Username (8 character maximum)"];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 400, 50)];
[label setText:@"Username"];
[textField addTarget:self action:@selector(textFieldDidChange:) forControlEvents: UICOntrolEventEditingChanged];
...
(void) textFieldDidChange:(id)sender {
// play sound
}
...
[aCheckBox setAccessibilityLabel:NSLocalizedString(@"One", @"Button title")];
[aCheckBox setAccessibilityTraits: UIAccessibilityTraitButton];                        

ANDROID

To provide notifications in an inclusive way, combine a displayed message or image with an accessibility label, vibration, and audio tone and perhaps flash the screen.

An updated contentDescription should be used to provide state information for custom elements. States are provided for standard platform elements but must be set for custom or compound elements.

Android example

<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/Username" />
<EditText android:id="@+id/editText" android:inputType="text" android:layout_height="wrap_content" android:layout_width="wrap_content" android:focusable="true"></EditText>
// ...
editText.addTextChangedListener(new TextWatcher(){
public void afterTextChanged(Editable e) {
  if (e.length() > 8) {
   // play sound
   // change label
   label.text = "Username must be 8 characters or less";
  }
}
...
<Button android:id="@+id/btnMute"
     android:layout_height="wrap_content"
     android:layout_width="wrap_content"
     android:text="@string/mute"
     android:onClick="toggle" />
...
public void toggle(View v) {
...
   if (v.isPressed()) {
     view.setContentDescription("Muted");
   }
   else
   {
     view.setContentDescription("Mute");
   }
}                        
<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/Username" />
<EditText android:id="@+id/editText" android:inputType="text" android:layout_height="wrap_content" android:layout_width="wrap_content" android:focusable="true"></EditText>
// ...
editText.addTextChangedListener(new TextWatcher(){
public void afterTextChanged(Editable e) {
  if (e.length() > 8) {
   // play sound
   // change label
   label.text = "Username must be 8 characters or less";
  }
}
...
<Button android:id="@+id/btnMute"
     android:layout_height="wrap_content"
     android:layout_width="wrap_content"
     android:text="@string/mute"
     android:onClick="toggle" />
...
public void toggle(View v) {
...
   if (v.isPressed()) {
     view.setContentDescription("Muted");
   }
   else
   {
     view.setContentDescription("Mute");
   }
}                        

HTML

To provide notifications in an inclusive way, combine a visual cue with audio and haptic cues. For example, if the user types too many characters in a form field, display an error in the label of the form field in addition to a sound and/or vibration.

For standard controls such as radio buttons or checkboxes created with the input element these state changes are automatically provided by the browser. However, for images and other custom controls these changes must be provided visually, textually, and could also be provided through ARIA. With a change of state there should be a new text alternative for an image. ARIA can also be used but not solely relied upon. Non-ARIA fallback options must be available.

HTML example

<script type="text/javascript">
Function checkLength(obj) {
Var str = obj.value
  if (str.length >= 8)
  {
     document.getElementById("l1").textContent = "Create Username (max 8 characters): ERROR - must be 8 characters or less";
     document.getElementById("audio1").play();
  }
}
</script>
 ...
<audio id="audio1" autostart="">
  <source src="beep.mp3" type="audio/mp3" />
  <embed id="audio2" src="beep.mp3" autostart="false" loop="false">
  </embed>
</audio>
...
<label id="l1" for="uname">Create Username (max 8 characters):</label>
<input type="text" id="uname" onblur="checkLength(this);" />                        
<script type="text/javascript">
Function checkLength(obj) {
Var str = obj.value
  if (str.length >= 8)
  {
     document.getElementById("audio1").play();
  }
}
</script> 
...
<audio id="audio1" autostart="">
  <source src="beep.mp3" type="audio/mp3" />
  <embed id="audio2" src="beep.mp3" autostart="false" loop="false">
  </embed>
</audio> 
...
<label id="l1" for="uname">Create Username:</label>
<input type="text" id="uname" onblur="checkLength(this);" />                        

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.
Results

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.