Focus order must

Mouse or touch users determine the order in which they interact with actionable elements. Keyboard and screen reader users depend on the focus order provided by the content. For example, navigating a form can be disorientating if the sequence jumps between unrelated elements.

Content order will normally dictate focus order. However, this may not always be the case. Actionable content must follow a logical sequence that will maintain the meaning and operation of the content.

Consideration should be given to anything that programmatically moves the focus for customised or enhanced features, e.g. menu drawers that close after moving focus onward from the last item.

---

iOS

Focus order in iOS is determined by physical layout of controls/views. Developers can reorder code, or control and change focus order by using the UIAccessibilityContainer' protocol if they need to.

---

Android

The focus order will fall to the nearest, neighbouring, focusable element by default. Sometimes this may not match what is intended and as such explicit overrides may need to be provided.

This can be done by using the following:

• android:nextFocusDown defines the next view to receive focus when the user navigates down
• android:nextFocusLeft defines the next view to receive focus when the user navigates left,
• android:nextFocusRight defines the next view to receive focus when the user navigates right,
• android:nextFocusUp defines the next view to receive focus when the user navigates up.

Android Pass Example

// focus moves from button 1 to 2 and then 3 and then back around to 1 
<LinearLayout android:orientation="vertical" ... >
  <Button android:id="@+id/btn1" android:nextFocusUp="@+id/btn3" android:nextFocusDown="@+id/btn2"... />
  <Button android:id="@+id/btn3" android:nextFocusUp="@+id/btn2" android:nextFocusDown="@+id/btn1" ... />
  <Button android:id="@+id/btn2" android:nextFocusUp="@+id/btn1" android:nextFocusDown="@+id/btn3" ... />
</LinearLayout>

---

HTML

The following will ensure a logical content order:

• Code according to tab order;
• Be aware tabIndex (positive, ‘0’ and negative) may not be supported in mobile browsers;
• Do not use tables for layout purposes.

HTML Pass Example

<div>
    <h3>Shipping Address</h3>
    <label for="n1">Name</label><input type="text" id="n1">
    <label for="a1">Address</label><input type="text" id="a1">
...
</div>
<div>
    <h3>Billing Address</h3>
    <label for="n2">Name</label><input type="text" id="n2">
    <label for="a2">Address</label><input type="text" id="a2">
...
</div>

---

Testing

Procedures

1. Activate the application with a screen reader.
2. Navigate through the active on-screen object, elements, and controls.
3. Verify that the focus order is equivalent to the intuitive visual reading order of the page.
4. Select radio buttons, checkboxes and other actionable object, elements, and controls.
5. If additional item appear or become enabled, determine if these items are later in the focus order. Newly appearing fields should appear later in the focus order. Ensure focus moves forward and backward in an intuitive manner. Note: Android has a focus emulator that can be used in the absence of a directional controller.

Outcome

The following checks are all true:

The focus order is equivalent to the intuitive visual reading order of the page;

• When additional items appear or become enabled, these items appear after the item that activated them;
• Focus moves forward and backward in an intuitive manner.

---