91Èȱ¬

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.

---

iOS

Ensure that VoiceOver users are able to swipe into and away from all focusable controls on a page. For example, make sure that:

• On-screen keyboards can be dismissed by pressing the Return key.
• All dialog boxes contain a focusable Close or OK button. iOS also offers the accessibilityPerformEscape method to support the Escape gesture (similar to the Escape functionality on a desktop keyboard). This will allow users to dismiss a dialog box by using a two-finger Z-shaped gesture to dismiss the dialog box. Refer to page for more information.
• By default, when using a UITextField, the on-screen keyboard will not be dismissed when the Return key is pressed. To fix this, the following additional code is required:

iOS Example (Objective-C)

// Dismiss the keyboard on return
- (IBAction)returnKey:(id)sender {
    [sender resignFirstResponder];
}

---

Android

Ensure that TalkBack users are able to swipe into and away from all focusable controls on a page. For example, make sure that:

On-screen keyboards can be dismissed by pressing the Return key All dialog boxes contain a focusable Close or OK button.

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

Make sure that focus is not trapped as a result of JavaScript methods such as onBlur, onChange or onFocus, or through embedded plug-ins. When investigating third party plug-ins, make sure that it is possible to tab into and out of the content.

If content must be provided in a way that may cause a keyboard trap, provide a means for users to bypass the affected content, such as through an in-page link above the content which directs the user to a point immediately below the content.

HTML Pass Example

<!-- JavaScript updates field label to indicate an error but does not trap focus -->
<script>
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">

---

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, for example, a model dialogue has a Close button, or a submit / cancel button.

Outcome

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.

---