Focusable elements

Must

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

Description

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

Focus is defined differently depending on the platform. For example, iOS focus is limited to elements that support keyboard input and VoiceOver focus also requires accessibility to be enabled and proper frames defined

IOS

Ensure accessibility for all content that has meaning and functionality. Assistive technologies provide focus to all objects that have accessibility enabled. This standard supports input methods based on iOS platform level assistive technologies such as Assistive Touch, Switch Support and VoiceOver. It relates back to the principle of supporting platform accessibility settings and features.

iOS example

[somethingAccessible setIsAccessibilityElement:YES];
[somethingAccessible setAccessibilityLabel:NSLocalizedString(@"Description of thing", @"Accesibility label for thing")];
[somethingDecorative setIsAccessibilityElement:NO];                        
[somethingInteractive setIsAccessibilityElement:NO];                        

ANDROID

Ensure all active elements can receive focus from assistive technology and accessible input methods by setting the focusable attribute for the field to ‘true’.

Android example

//A text input that can be accessed directly by touch and is focusable using the keyboard
<EditText 
    android:id="@+id/editText" 
    android:inputType="textPassword" 
    android:layout_height="wrap_content" 
    android:layout_width="wrap_content" 
    android:focusable="true"></EditText>                        
//A text input that cannot be focused using the keyboard
<EditText 
    android:id="@+id/editText" 
    android:inputType="textPassword" 
    android:layout_height="wrap_content" 
    android:layout_width="wrap_content" 
    android:focusable="false"></EditText>                        

HTML

Use standard HTML elements that provided keyboard access automatically. For simulated element ensure keyboard focus is set using tabindex.

For inactive elements, ensure focus is disabled for controls that supported the disabled attribute.

HTML example

<!-- standard element that is interactive by default -->
<a href="..."><img src="back.jpg" alt="back" /></a>                        
<!-- clickable image that is not keyboard accessible -->
<img src="back.jpg" alt="back" onclick="myClickEvent();" />                        

TESTING

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

Procedures

iOS

  1. Activate a screen reader.
  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).
Results

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

Android

  1. Activate a screen reader.
  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.
Results

Android

The following check is 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.