Mobile Accessibility Guidelines - Focus

Content order must

Content and focus order must be logical.

All users benefit when content is logically ordered, in particular users of assistive technology, which follows the flow of the page or screen.

Assistive technology, such as screen readers, will read through all content of a page or screen sequentially, regardless of layout. Users may also jump between elements such as headings, lists or form inputs. Screen reader users on touch will navigate all static and actionable content when swiping through content, unlike external and desktop keyboard users who will navigate only actionable elements by tabbing.

Any modal components that open from a user action must 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.

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

By default, VoiceOver will read page content based on the screen layout, that is from top left to bottom right. Therefore, make sure that the reading order of page content makes sense. For example, ensure that submit buttons on forms are placed at the end of the form rather than before the list of form fields.

iOS Example (Objective-C)

view.accessibilityElements 
= @[moduleButton, followLabel, 
buttonContainer];

Android

By default, TalkBack will read page content based on code order and a built-in algorithm. If focus order is not as expected, developers may explicitly set focus order using one or more of the following attributes:

  • nextFocusUp
  • nextFocusDown
  • nextFocusLeft
  • nextFocusRight

Android Pass Example

<EditText
  android:hint="@string/text_2_desc" 
  android:nextFocusDown="@+id/edit3"
  android:nextFocusUp="@+id/edit1"
  android:nextFocusLeft="@+id/edit1"
  android:nextFocusRight="@+id/edit3" />

android:nextFocusRight="@+id/edit3" />

HTML

Screen readers convey page content in the order in which it appears in the document object model (DOM). Therefore, make sure that pages are structured in a meaningful order, i.e. that the reading and code order of the page match. For example:

Make sure that a page’s footer appears towards the end of the HTML document; do not place it at the top of the HTML and use CSS to visually position it at the bottom of the page. Do not use HTML table markup for layout purposes. Avoid using positive (>0) tabindex values to “force” a tab sequence, as the swipe order must then be reconfigured each time a new page element is added. Only take this approach if re-ordering the HTML sequence does not support the expected swipe order.

HTML Pass Example

<div>Banner </div>
<div>
 <div style="float:left;">
  <div><h1>Main story</h1></div>
  <div>Story content</div>
 </div>
 <div style="float:right;">Supplementary info</div>
</div>

Testing

Procedures

  1. Activate a screen reader.
  2. Navigate using standard commands for next and previous.
  3. Verify that the content is announced in a meaningful sequence.

Outcome

The following check is true:

  • The content is announced in a meaningful sequence.