Focus should not forcibly shift on input

The focus of the user is forcibly moved without notifying the user. Ensure that focus shifts are controlled by the user and that activating screen elements does not cause focus to shift drastically.

Example 1: When the user makes a selection in a picker the focus should not leave the picker, it should remain on the picker.

Example 2: When the user enters valid data into an edit field, focus should not move off of the edit field and onto another control.

When focus is forcibly shifted users of assistive technology or keyboard only users may have to press many keystrokes to return to the place they were at. Focus changing events that are based on keyboard actions may cause keyboard only users to select an item that was along the path to another item and thus may prohibit users from the selecting the desired item.

iOS Example

// The user must manually navigate to the expiration date fields after
entering the credit card number.
@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UITextField *ccnumber;
@property (weak, nonatomic) IBOutlet UITextField *expiration2;
- (IBAction)ccFieldEdited:(id)sender;
@end

@implementation ViewController
- (IBAction)ccFieldEdited:(UITextField *)sender {
    //take any data related actions needed, but do not change focus to
another element (such as the expiration field)
}

iOS Failure

// When entering a credit card number focus is advanced to the expiration
date fields after the last digit of the credit card number is entered.
@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UITextField *ccnumber;
@property (weak, nonatomic) IBOutlet UITextField *expiration2;
- (IBAction)ccFieldEdited:(id)sender;
@end

@implementation ViewController
- (IBAction)ccFieldEdited:(UITextField *)sender {
    //credit cards have 16 digits, after entering 16 digits, shift focus to
the expiration date field
    if(sender.text.length >= 16) {
        [_expiration2 becomeFirstResponder];
    }
}

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

Android Failure

//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 Example

Example 1:
When the user presses up/down arrow in a drop down list (combo box) the
focus remains in the combo box.  The focus does not move to another control
until the user presses tab or the user clicks the mouse.

Example 2:
When the user selects a certain radio button via the keyboard, focus stays
off of the radio button and onto another control only when tab is pressed
or the mouse is clicked. 

HTML Failure

Example 1:
When the user presses up/down arrow in a drop down list (combo box) the
focus leaves the combo box list and the selected item is set.

Example 2:
When the user selects a certain radio button via the keyboard, focus moves
off of the radio button and onto another control.

Remediating

Remove keyboard focus shifts that the user does not control. If the change of a control value invokes a focus change, supply a button alongside the control so the user can invoke the action explicitly. Ensure that form validation does not explicitly control the focus. For example do not force the focus to the next 3 digits of a phone number field if a user has typed three digits.

Testing

Recommended tool/method: Manual / Screen Reader

Ensure focus is not forcibly shifted on input (Manual)

1. Activate the application
2. Navigate through the active objects, element, or controls
   • Can you arrow up/down in combo boxes or lists without focus shifting?
   • Does input cause a new window to appear?
   • Does input cause a form to be submitted?
   • Can you enter text into an input field such as a telephone number field without focus shifting to another field?

Ensure focus is not forcibly shifted on input (Screen Reader)

1. Activate the app with voice output software
2. Navigate through the active objects, element, or controls
   • Can you arrow up/down in combo boxes or lists without focus shifting?
   • Does input cause a new window to appear?
   • Does input cause a form to be submitted?
   • Can you enter text into an input field such as a telephone number field without focus shifting to another field?