Skip to content

Latest commit

 

History

History
176 lines (150 loc) · 15.2 KB

File metadata and controls

176 lines (150 loc) · 15.2 KB

Keyboard accessibility testing on mobile devices

Setup

Which keyboard should you get?

Any bluetooth keyboard should work. If you are testing both iOS and Android, it is worth having a dedicated keyboard for each. If you are working alone and would like to save money, you can use one keyboard for two devices. It is more convenient if you get a multi-device keyboard because they allow switching between multiple paired devices instead of having to constantly unpair and pair. Another way to use one keyboard with multiple devices is with Apple’s Magic Keyboard which can be connected using bluetooth to an iPhone and using USB-C to a Google Pixel.

Setting up a bluetooth keyboard on iOS

  1. Pair your keyboard with your iPhone by going to Settings > Bluetooth and setting Bluetooth On.
  2. Choose your bluetooth keyboard.
  3. Before using your keyboard, enable FKA (Full Keyboard Access) by going to Accessibility > Keyboards > Full Keyboard Access.

Setting up a bluetooth keyboard on Android

  1. Pair your keyboard with your Android device by going to Settings > Connected Devices > Pair new device.
  2. Upon connection, you get a prompt confirming the keyboard type.

Discovering the keystrokes

Android’s keyboard shortcuts

After connecting the keyboard, go to Settings > System > Languages & Input > Physical Keyboard > Keyboard Shortcuts.

Note

These steps were reproduced on a Pixel 5a running Android 13.

This will display a list of keyboard shortcuts.

Android keyboard shortcuts

The shortcut list uses a search icon which may be present on some keyboards. On the Logitech K480 and K780 models, the search icon corresponds to the start key. On Apple’s Magic Keyboard, this corresponds to the command key. You may need to experiment and confirm to determine what this is on your keyboard.

The list of shortcuts shown does not show how to perform some critical actions like navigating between the top bar and the main content but this is provided in the full keystroke table below (action: Switch between panes). Also, Android keystrokes cannot be re-mapped.

iOS Full Keyboard Access Commands

Go to Settings > Accessibility > Keyboards > Full Keyboard Access > Commands.

This gives a full list of the commands and allows re-mapping and recording keyboard shortcuts.

Apple keyboard shortcuts mapping

Keystrokes for testing on Android

Action Magic keyboard Logitech K480 Logitech K780
Navigate to the next interactive element tab tab tab
Navigate to the previous interactive element shift + tab shift + tab shift + tab
Scroll/Go to next item in group
Select items in a collection, list, or menu
arrow keys arrow keys arrow keys
Activate an interactive element enter or space bar enter or space bar enter or space bar
Go Back. This can be used to dismiss menus and popups. command + backspace search-icon key + back start + left arrow or back/F6
Exit esc esc back/F6 or home/F4
Switch between apps option + tab Android 13 or lower: alt + tab
Android 14 and up: alt + tab or start + tab
Android 13 or lower: alt + tab
Android 14 and up: alt + tab or start + tab
Switch between panes (navigation clusters) such as top navigation pane and main content Android 13 or lower: command + tab
Android 14 and up: control + tab
Android 13 or lower: start + tab
Android 14 and up: control + tab
Android 13 or lower: start + tab
Android 14 and up: control + tab
Open keyboard shortcuts list.
- The shortcuts for Home, Back and Notifications use the search-icon key which is just the command key.
command + / start + / start + /
(Does not work with numpad / key)

Keystrokes for testing on iOS

Action Magic keyboard Logitech K480 Logitech K780
Navigate to the next interactive element (within current "Tab Group") tab tab tab
Navigate to the previous interactive element (within current "Tab Group") shift + tab shift + tab shift + tab
Navigate to the next interactive element (linearly regardless of tab group) ctrl + tab
Navigate to the previous interactive element (regardless of tab group) shift + ctrl + tab
Scroll/Go to next item in group
Select items in a collection, list, or menu
Arrow keys are directional within currrent tab group
arrow keys arrow keys arrow keys
Activate an interactive element space bar space bar space bar
Show Help tab + h tab + h tab + h
Go Back. This can be used to dismiss menus and popups. tab + b tab + b tab + b
Exit esc esc back/F6 or home/F4
Show Custom Accessibility Actions tab + z tab + z tab + z
Switch between apps function + up arrow Double-press back/F4 Double-press back/F6

Testing

Overview of keyboard testing procedure

Test Steps WCAG SC
Ensure all actions can be performed by keyboard. 2.1.1 Keyboard
Ensure there are no keyboard traps 2.1.2 No Keyboard Trap
Ensure the focus order is logical. 2.4.3 Focus Order
Ensure keyboard focus is visible 2.4.7 Focus Visible
When any user interface component receives focus, ensure it does not initiate a change of context. 3.2.1 On Focus
Ensure character key shortcuts without modifiers can be remapped or turned off 2.1.4 Character Key Shortcuts
Ensure content which appears on focus, is persistent and dismissable. 1.4.13 Content on Hover or Focus

Full keyboard testing procedure

  1. Ensure all actions can be performed by keyboard.
    1. iOS:
      1. If an action is not available, check if there are custom actions. Also try tab + g to perform keyboard gestures. Depending on interpretation, keyboard gestures may not be a viable alternative for meeting 2.1.1.
    2. Android:
      1. If an action is not available. Open the keyboard shortcuts list to check for any alternative methods to perform an action.
      2. If you cannot access the top navigation pane or other segment of the screen, check if you can reach the area by using the “switch between panes” keystroke.
  2. Ensure there are no keyboard traps.
    1. If an element receives keyboard focus, it should be possible to move focus away using standard inputs or there are instructions to guide users.
  3. Ensure the focus order is logical.
    1. When navigation sequences affect meaning and operability, focusable elements need to receive focus in an order that preserves meaning and operability.
    2. The focus order should generally follow the reading order: top to bottom and start to end. However, the focus order can also differ as long as the order makes sense for the activity.
    3. When a popup appears focus should be set on the new content and when dismissed, focus should be returned to the triggering element.
  4. Ensure keyboard focus is visible.
    1. Users should always be able to tell which element has keyboard focus.
    2. iOS:
      1. The default FKA indicator is enough and it can be customized in the Full Keyboard Access settings.
    3. Android:
      1. The default focus indicator tends to be very faint. In cases where the developer has not modified the default Android styles (including background color and button color), then the default indicator is sufficient. But in the much more unlikely case of custom focus styles, the developer must ensure the focus indicator is sufficient and should adjust the default to ensure the contrast ratio is at least 3:1.
  5. When any user interface component receives focus, ensure it does not initiate a change of context. Note: this is unlikely to occur on native mobile apps.
    1. Ensure elements receiving focus do not cause any of the following:
      1. Forms submitted automatically;
      2. New windows are launched;
      3. Focus jumps to another component;
      4. A different app or user agent is activated;
      5. Content is changed that affects the meaning of the screen/page;
  6. Ensure character key shortcuts without modifiers can be remapped or turned off.
    1. Try inputting all of the alphabet, punctuation, number and symbol characters. If any of these keys are used alone then make sure one of the following is true:
      1. There is a mechanism available to turn the shortcut off;
      2. A mechanism is available to remap the shortcut to include one or more non-printable keyboard keys (e.g., ctrl, alt/option)
      3. The keyboard shortcut for a user interface element is only active when that element has focus.
  7. Ensure content which appears in focus, is persistent and dismissable. Note: this is unlikely to occur on native mobile apps.
    1. Where receiving keyboard focus triggers additional content to become visible and then hidden, the following are true:
      1. Dismissible: A mechanism is available to dismiss the additional content without moving keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
      2. Persistent: The additional content remains visible until the focus trigger is removed, the user dismisses it, or its information is no longer valid.
      3. (Hoverable is not applicable to mobile because it is only for mouse hover.)

References

Apple iPhone

Google Android