Mobile Accessibility Guidelines - Focus

Focusable elements must

All interactive elements must be focusable and non-interactive elements must not be focusable.

Some people may only use a keyboard, switch device or voice control for navigation and input. For example, astronauts in space struggle to use a mouse, track pad, or touch screen because these require gravity.

In order to operate an interactive element, a user must first be able to move focus to the element via any input device; keyboard, mouse, touch, voice, switch device etc, as well as via touch when a screen reader is running.

iOS

On iOS, many elements cannot be accessed using an external Bluetooth keyboard unless the user switches VoiceOver on.

Make sure that all content that has meaning and functionality is focusable by applying the isAccessibilityElement attribute and setting its value to true. If a page element is decorative or disabled, set the value to false.

iOS Example (Objective-C)

[myPageElement.setIsAccessibilityElement:YES];

[myDecorativeElement.setIsAccessibilityElement:NO];

Android

Android operating systems below Android 4 do not trap touch events, so users of TalkBack cannot directly touch the screen without activating elements.

Make sure that all content that has meaning and functionality is focusable by setting the android:focusable attribute to true. Additionally, set the importantForAccessibility to yes. If a page element is decorative or disabled, set the value to false, and set the importantForAccessibility attribute to no.

Android Pass Example

<ImageView
  android.id="@+id/my_focusable_image"
  android.source="@drawable/my_focusable_image_source"
  android:contentDescription="[alternative text]"
  android:focusable="true"
  android:importantForAccessibility="yes"/>


<ImageView
  android.id="@+id/my_decorative_image"
  android.source="@drawable/my_decorative_image_source"
  android:contentDescription="[alternative text]"
  android:focusable="false"
  android:importantForAccessibility="no"/>

HTML

Use native interactive elements, such as button, a and input elements instead of re-purposing another element, as such controls are focusable by default and include the required semantics and behaviour. If elements that are not keyboard accessible by default (such as div and span elements) must be used, apply the tabindex attribute to the element, and set its value to 0. Further scripting will be required to ensure such elements can be activated using the Enter, spacebar, or cursor keys where appropriate, and further WAI-ARIA markup will be required to ensure the element is exposed correctly to assistive technologies.

Do not apply the tabindex attribute with values of 0 or more to inactive/non-interactive elements, such as headings and images.

For inactive elements, remove the element from the swipe focus order by applying the disabled. This is the prefered method as it is well supported. Alternatively use the aria-disabled attribute where supported, applying the tabindex attribute and setting its value to -1, and applying the aria-hidden attribute and setting its value to false. Also use the tabindex attribute and setting its value to -1 with aria-hidden.

HTML Pass Example

<!-- Standard button element that is interactive by default -->
<button>Click me!</button>

<!-- Custom button made focusable using tabindex="0", and provided with an appropriate role -->
<span role="button" tabindex="0" onclick="…">Click me!</span>

<!-- Disabled/non-interactive button (option 1) -->
<button tabindex="-1" aria-hidden="true">I am not focusable!</button>

<!-- Disabled/non-interactive button (option 2) -->
<button disabled>I am discoverable by screen readers but not focusable!</button>

Testing

Procedures

Procedure for iOS and Android are a little different, so both are provided.

iOS

  1. Activate VoiceOver.
  2. Verify that each actionable object can be accessed directly (by touch) and appears in the focus order of the view.
  3. Verify that each actionable object can be focused with a screen reader by navigation (swipe gestures).

Android

  1. Activate a TalkBack.
  2. Verify that each actionable element can be navigated to directly (by touch Android 4+).
  3. Verify that each actionable element can be navigated to using the keyboard or d-pad.

Outcome

Test results for iOS and Android are a little different, so both are provided.

iOS

The following checks are true:

  • Each actionable object can be accessed directly (by touch) and appears in the focus order of the view;
  • Each actionable object can be focused with a screen reader via swipe gestures.

Android

The following checks are true:

  • Each actionable element can be focused directly (by touch);
  • Each actionable element can focused/navigated to using the keyboard or d-pad.

Note: Android OS’s below 4 do not trap touch events so users of some assistive technologies such as Talkback cannot directly touch the screen without activating elements. Use a d-pad, trackball or keyboard to test the sequence order for all Android OS’s.