Keyboard trap

Must Not

There must not be a keyboard trap.

Description

If using a keyboard or other non-pointer input, user focus must be allowed to progress and not become trapped. All focusable elements must be accessible.

Any modal components that open from a user action should keep focus within the component and must provide a means to close or dismiss the component, which would return focus to the trigger element. For example, on-screen keyboards, information panels, or full-screen media.

Any menu or drawer component that opens from a user action may follow the modal pattern, or may automatically close or dismiss the component and return focus to the trigger element after the user moves focus onward from the last element. For example, a drop-down menu, side-drawer menu, or accordion panel.

IOS

Controls should freely receive focus and allow the user to move to another control. The user must be able to move focus into and away from the control as much as needed while the user is reviewing the screen contents.

On-screen keyboards or other pop-up components that appear when a control gains focus should be dismissible to ensure the user can navigate to other controls that may have been covered by the objects.

iOS example

// Dismiss the keyboard on return
- (IBAction)returnKey:(id)sender {
    [sender resignFirstResponder];
}                        
// not dismissing the keyboard thus blocking other components
  (IBAction)returnKey:(id)sender{
    // Validate the field
    if (someValidCondition) {
       [sender resignFirstResponder]; // Dismiss the keyboard
       // Do something with the field contents
    } else {
      return;
      // the keyboard doesn't close
    }
}                        

ANDROID

Controls should freely receive focus and allow the user to move to another control. The user must be able to move focus into and away from the control as much as needed while the user is reviewing the screen contents. On-screen keyboards or other on-screen components that appear when a control gains focus should be dismissible to ensure the user can navigate to other controls that may have been blocked by on-screen elements.

Note: HTML content within an app (banner adds, Terms and Conditions, Maps etc.) can create a focus trap for screen reader users with Android 4 or earlier where support for HTML is poor.

HTML

Do not trap focus via JavaScript, onBlur, onChange, onFocus, or other custom focus code, or using embedded elements that may trap focus.

HTML example

<!-- JavaScript updates field label to indicate an error but does not trap focus -->
<script type="text/javascript">
function check() {
  if (isValid()) {
    // update field label to explain that field is in error but do not trap focus
   var s = createElement("span");
   s.innerText = "(Invalid name)";
   document.getElementById("l1").appendChild(s);
  }
}
</script>
<label id="l1" for="name1"> First name</label>
<input onBlur="check();" type="text" id="name1">                        
<!-- JavaScript keeps returning focus to a field until a user enters data correctly -->
<script type="text/javascript">
function check() {
  if (isValid()) {
    document.getElementById("name1").focus();
  }
}
</script>
<label for="name1"> First name</label>
<input onBlur="check();" type="text" id="name1">                        

TESTING

Procedures
  1. Activate a screen reader.
  2. Navigate to an actionable object, element, or control.
  3. Attempt to navigate away from the item via a navigation method when focus is on the item.
  4. Ensure that the focus moves out of the item.
  5. If focus does not move out of the item with the standard gesture or method, ensure that a method for moving the focus away from the item is described visually and by a screen reader.
Results

Either of the following checks are true:

  • Object, elements, or controls can be navigated away from, through or over with a standard navigation method;
  • A method to navigate away from the item is described in a visible fashion and through a screen reader and the method works to move focus past or over the keyboard trap.