Standard operating system notifications

Should

Standard operating system notifications should be used where available and appropriate.

Description

Standard operating system (OS) methods for alerts and messages can often be more accessible than something custom made, in particular for users of assistive technology. This is because standard controls:

  • have traits that are understood by assistive technology such as screen readers,
  • generally appear in a consistent location, and
  • follow the user-defined options for font and colour.

App level and browser level errors and alerts should use operating system methods of notification. However, page/screen or content level errors and alerts may use either OS or custom notifications. Custom notifications must be perceivable. 

IOS

Use a UIAlertView to display a message box dialog that contains the error message.

iOS example

UIAlertView *messageBox = [[UIAlertView alloc] initWithTitle: NSLocalizedString(@"Error", @"Alert box title") message: NSLocalizedString(@"You must enter an email address", @"Alert box message" delegate:nil cancelButtonTitle: NSLocalizedString(@"OK", @"Accept button title") otherButtonTitles:nil];
[messageBox show];                        
// Display an error message in some other way.
[emailField setAccessibilityLabel:@"ERROR:  Email (required)"];                        

ANDROID

Use the AlertDialog to display error messages. As long as this is used, error messages and their associated functions will be accessible. 

Android example

//Use an Android standard alert dialog to display error messages
AlertDialog.Builder builder = new AlertDialog.Builder(this);

builder.setMessage(//Error Message String)
builder.setCancelable(true);
builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
    public void onClick(DialogInterface dialog, int id) {
        dialog.cancel();
    }
});
AlertDialog alert = builder.create();                        
//A error on the screen causes a Toast notification on field validation
<TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:id="@+id/email_label" android:text="Email"></TextView>
<EditText android:id="@+id/email" android:inputType="text" android:hint="@string/email_field" android:layout_height="wrap_content" android:layout_width="wrap_content"></EditText>
<Button android:text="Submit" android:id="@+id/submit_form_button" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>

final EditText emailField = (EditText) findViewById(R.id.email);
final Button button = (Button) findViewById(R.id.submit_form_button);
button.setOnClickListener(new OnClickListener() {
    public void onClick(View v) {
        String email = emailField.getText().toString();
        if(...) {
            Toast.makeText(getApplicationContext(), "Email fields does not match", Toast.LENGTH_SHORT).show();
        } else {
            submitForm(email);
        }
    }
});                        

HTML

A JavaScript alert is one option for HTML to meet this standard.

HTML example

<script>
    alert('Status message');
</script>                        

TESTING

 

Procedures
  1. Activate a screen reader.
  2. Trigger an alert or error on at the app level e.g.
    • Time out,
    • Update notice,
    • Error contacting the server,
    • Other app level errors or alerts.
  3. Verify that the alerts or error notifications are announced by assistive technologies.
Results

The following check is true:

  • The app uses operating system standard methods for providing app level or non-action triggered alerts and indicating errors to users which are announced by assistive technologies.