Managing focus

Must Not

Focus or context must not automatically change during user input.

Description

It can be disorienting and hinder users from verifying information or correcting mistakes if the focus automatically changes when the user is not expecting it. For example, moving to the next control or to a validation error message during input.

Focus must only change when activated by the user. This could be via mouse or touch, using 'tab' or 'flicking' to change form control, or using 'space' or 'enter' to activate a button.

IOS

Do not move focus between fields automatically. Require the user to select a new field manually to move focus.

iOS example

 
- (IBAction)dataValidation:(id)sender {
    // Do not change focus
}                        

Code checks the contents of the field during edit and sends sender resignFirstResponder; or assigns theFirstResponder to the next control when entry is complete.

                        

ANDROID

Remove focus shifts that the user does not control. For example, when a user selects a certain radio button via the keyboard, focus shall not move off of the radio button onto another component.

Android example

//A toggle button and progress bar appear on the screen, focus does not switch automatically
<ToggleButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/toggleButton_1" android:contentDescription="@string/toggleButton_1_desc"></ToggleButton>
<ProgressBar android:layout_height="wrap_content" android:layout_width="wrap_content" style="?android:attr/progressBarStyleLarge" android:id="@+id/progressBar_1" android:contentDescription="@string/progressBar_1_desc"></ProgressBar>
...
final ToggleButton togglebutton = (ToggleButton) findViewById(R.id.bars_toggleButton_1);
final ProgressBar progressbar = (ProgressBar) findViewById(R.id.bars_progressBar_1);
...                        
//A toggle button and progress bar appear on the screen and focus switches to the progress bar automatically
<ToggleButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/toggleButton_1" android:contentDescription="@string/toggleButton_1_desc"></ToggleButton>
<ProgressBar android:layout_height="wrap_content" android:layout_width="wrap_content" style="?android:attr/progressBarStyleLarge" android:id="@+id/progressBar_1" android:contentDescription="@string/progressBar_1_desc"></ProgressBar>
...
final ToggleButton togglebutton = (ToggleButton) findViewById(R.id.bars_toggleButton_1);
final ProgressBar progressbar = (ProgressBar) findViewById(R.id.bars_progressBar_1);
progressbar.requestFocus();
...                        

HTML

Keys points are:

  • Use the onBlur method rather than onChange method.
  • Do not move focus on input validation - for example, once a certain number of characters have been entered.

HTML example

Validating input after the user completes what is being entered, without moving focus:

<fieldset>
  <legend>Mobile phone number</legend>
  <label for="p1"> Country code </label>
  <input type="text" id="p1" onBlur="validateCode();" />
  <label for="p2"> Number </label>
  <input type="text" id="p2" onBlur="validateNumber();" />
</fieldset>                        

Validating input while the user is typing, and/or moving focus to the error message:

<fieldset>
  <legend>Mobile phone number</legend>
  <label for="p1"> Country code </label>
  <input type="text" id="p1" onChange="validateAndMove();" />
  <label for="p2"> Number </label>
  <input type="text" id="p2" onChange="validateAndMove();" />
</fieldset>                        

TESTING

 

Procedures
  1. Activate the screen reader.
  2. Fill in form fields according to their constraints and verify that focus is not forcibly shifted when entering text, traversing a list or selecting an item.
Results

The following check is true:

  • Focus does not shift to other objects, elements, or controls while navigating lists, entering data into form fields or selecting an item within an object, element, or control.

Note: Focus movement to a sub-item of the object, control, element that is expected, such as movement to the next list item on using arrow key, tabbing or flicking, is desired and thus meets this check.