Accessibility testing
Find guidance on how to test switches for travellers who use assistive technology.
Keyboard testing
- Use the ‘Tab’ key to navigate to the switch.
- Make sure the switch receives focus and the expected focus state is presented.
- Press ‘Space’ to toggle the switch state (on/off).
- Check there is visual feedback to indicate the state of the switch.
- When submitting check that the outcome meets expectations, such as an option being selected.
Screen reader checks
NVDA on Chrome
- 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.
- Check the switch’s name, role and state are announced. Switches will be announced as checkboxes. For example, “Checkbox, checked price alerts”.
- Press ‘Space’ to toggle the switch state (checked/unchecked).
- Check that the state change is announced.
VoiceOver on Safari
- 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.
- Check that the switch’s name, role and state are announced. Switches will be announced as checkboxes. For example, “Price alerts, ticked, tickbox”.
- Press ‘CTRL’ + ‘OPT’ + ‘Space’ to toggle the switch state (ticked/unticked).
- Check that the state change is announced.
VoiceOver (iOS)
- Swipe left or right to navigate to the switch.
- Check that the switch’s name, role and state are announced. For example, “Price alerts, switch button, off”.
- Double-tap anywhere to toggle the switch state (on/off).
- Check that the state change is announced.
TalkBack on Android
- Swipe left or right to navigate to the switch.
- Check that the switch’s name, role and state are announced. For example, “Price alerts, switch, off”.
- Double-tap anywhere to toggle the switch state (ticked/unticked).
- Check that the state change is announced.