Focus or context must not automatically change on user input

Focus shifts must be controlled by the user and focusing screen elements must not cause focus to shift to other components, or change or submit content.

Examples

1. A form is submitted automatically when a component receives focus
2. A checkbox or radio button is selected when it receives focus
3. A new screen appears when a component receives focus
4. Focus is changed to another component when that component receives focus

Focus should not shift based on user input such as entering the maximum numbers allowed in a phone number field. In this case, the focus should not shift out of the field to the next field. When this occurs, it will likely prevent users of the keyboard or assistive technology from verifying information or correcting mistakes.

It is acceptable for focus or context to change when the user presses tab, presses enter or space on a link or button, or clicks on a field, link or button.

When the focus is shifted when a component is focused, the user can become disoriented and may have difficultly returning to the previous location. Similarly a form that is submitted based on focus changes may be submitted with incorrect data as the user may not have expected the incomplete form to be submitted.

HTML

Keys 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

<!-- move focus once the correct number of digits have been entered -->
<fieldset><legend>Phone number</legend>
<label for="p1"> Country code </label>
<input type="text" id="p1" />
<label for="p2"> Area code </label>
<input type="text" id="p2" />
<label for="p2"> Number </label>
<input type="text" id="p3" />
</fieldset> 

HTML Failure

<!-- move focus once the correct number of digits have been entered -->
<fieldset><legend>Phone number</legend>
<label for="p1"> Country code </label>
<input onChange="validateAndMove();" type="text" id="p1" />
<label for="p2"> Area code </label>
<input onChange="validateAndMove();" type="text" id="p2" />
<label for="p2"> Number </label>
<input onChange="validateAndMove();" type="text" id="p3" />
</fieldset> 

Remediating

Remove focus shifts that users do not control. Ensure that focusing a component does not submit a form. Use one of the following techniques:

1. Require users to activate a submit button in order for the form to be submitted.
2. Require users to activate a button to trigger a new screen.
3. Require users to navigate to a field to focus another field.

Testing

Recommended tool/method: Manual / Screen Reader

Ensure content or focus is not changed when focus changes occur

1. Verify that all elements can be focused directly by touch or via left/right flicking with the screen reader without the application taking action
2. Verify that the user can navigate to all fields without focus shifting once the end of the field is reached
3. Verify that the user can navigate to all fields without a popup or other action taking place
4. Verify that the user can fill out a field without the focus shifting when the end of the field is reached
5. Verify that the user can select all radio buttons in a group without focus shifting
6. Verify that the user can select checkboxes without focus shifting