Switch

Switches allow users to toggle between two states, on or off. On mobile, these are often used as a replacement for checkboxes.

Accessibility testing

Find guidance on how to test switches for travellers who use assistive technology.

Keyboard testing

  1. Use the ‘Tab’ key to navigate to the switch.
  2. Make sure the switch receives focus and the expected focus state is presented.
  3. Press ‘Space’ to toggle the switch state (on/off).
  4. Check there is visual feedback to indicate the state of the switch.
  5. When submitting check that the outcome meets expectations, such as an option being selected.

Screen reader checks

NVDA on Chrome

  1. Navigate to the switch to test by opening the elements list by pressing the ‘NVDA’ key + ‘F7’ and using arrow keys to move to the ‘Form fields’ menu.
  2. Check the switch’s name, role and state are announced. Switches will be announced as checkboxes. For example, “Checkbox, checked price alerts”.
  3. Press ‘Space’ to toggle the switch state (checked/unchecked).
  4. Check that the state change is announced.

VoiceOver on Safari

  1. Navigate to the switch to test. This can be done in a few ways, such as:
  • Open the rotor by pressing ‘CTRL’ + ‘OPT’ + ‘U’ and using the arrow keys to move to the ‘Form Controls’ menu
  • Press ‘CTRL’ + ‘OPT’ + ‘CMD’ + ‘J’ to move through the form elements, to the switch.
  1. Check that the switch’s name, role and state are announced. Switches will be announced as checkboxes. For example, “Price alerts, ticked, tickbox”.
  2. Press ‘CTRL’ + ‘OPT’ + ‘Space’ to toggle the switch state (ticked/unticked).
  3. Check that the state change is announced.

VoiceOver (iOS)

  1. Swipe left or right to navigate to the switch.
  2. Check that the switch’s name, role and state are announced. For example, “Price alerts, switch button, off”.
  3. Double-tap anywhere to toggle the switch state (on/off).
  4. Check that the state change is announced.

TalkBack on Android

  1. Swipe left or right to navigate to the switch.
  2. Check that the switch’s name, role and state are announced. For example, “Price alerts, switch, off”.
  3. Double-tap anywhere to toggle the switch state (ticked/unticked).
  4. Check that the state change is announced.