Changing focus must not

Content that updates on input can be confusing, especially to users of screen readers and screen magnification software, and people with cognitive impairment.

In forms 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.

This guideline is particularly important when creating forms.

---

iOS

Avoid moving focus between form controls and other interface elements unless explicitly triggered by the user. For example, provide a separate interface element (such as a submit button) to allow the user activate the related code. As a result, focus only changes if and when the user activates this button.

iOS Example (Objective-C)

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

---

Android

Avoid moving focus between form controls and other interface elements unless explicitly triggered by the user. For example, provide a separate interface element (such as a submit button) to allow the user activate the related code. As a result, focus only changes if and when the user activates this button.

Android Pass 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);
...

---

HTML

Avoid moving focus between form controls and other interface elements unless explicitly triggered by the user. For example, provide a separate interface element (such as a submit button) to allow the user activate the related code. As a result, focus only changes if and when the user activates this button.

In particular, avoid applying the onChange event handler to form controls such as select-based drop-down menus.

HTML Pass 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"  />
  <label for="p2"> Number </label>
  <input type="text" id="p2"  />
</fieldset>

---

Testing

Procedures

1. Navigate the app using the touchscreen.
2. Navigate to the on-screen objects, elements, or controls.
3. Begin to activate an item (touch it without lifting your finger or stylus).
4. Verify that the item does not immediately trigger an action/event.
5. Finish activating the item (remove your finger or stylus from the screen).
6. Verify that the item now triggers the action/event.

Outcome

The following checks are all true:

1. Objects, elements, or controls do not trigger actions/events at the start of activation (when touched);
2. Objects, elements, or controls trigger actions/events when the user finishes activation (touch is removed).

---