Accessibility testing

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

Keyboard Testing

1. Use the ‘Tab’ key to navigate to the accordion.
2. Make sure the accordion receives focus and the expected focus state is presented.
3. Press ‘Space’ or ‘Enter’ to open or close the accordion.
4. Check that the accordion opens and closes as expected and that the expected information is displayed or hidden from view.
5. Check that the focus has remained on the accordion control.

Screen Reader Checks

NVDA on Chrome

1. Navigate to the accordion to test. This can be done in two ways:
• Open the elements list by pressing the ‘NVDA’ key + ‘F7’ and using the arrow keys to move to the ‘Buttons’ menu.
• Press ‘B’ to move to the accordion (button).
2. Check that the accordion’s name, role, and state are announced. For example, “Journey duration, button, expanded.”
3. Press ‘Space’ or ‘Enter’ to open or close the accordion.
4. Check that the state has been updated and is correctly announced as either ‘collapsed’ or ‘expanded.’

VoiceOver & Safari

1. Navigate to the accordion to test. This can be done in two ways:
• Open the rotor by pressing ‘CTRL’ + ‘OPT’ + ‘U’ and use the arrow keys to move to the ‘Form Controls’ menu.
• Press ‘CTRL’ + ‘OPT’ + ‘CMD’ + ‘J’ to move to the accordion (button).
2. Check that the accordion’s name, role, and state are announced. For example, “Journey duration, collapsed, button.”
3. Press ‘CTRL’ + ‘OPT’ + ‘SPACE’ to open or close the accordion.
4. Check that the state has been updated and is correctly announced as either ‘collapsed’ or ‘expanded.’
5. Press ‘CTRL’ + ‘OPT’ + right arrow to check that the next available content is announced correctly.

VoiceOver on iOS

1. Swipe left or right to navigate to the accordion.
2. Check that the accordion’s name, role and state are announced. For example, “Journey duration, collapsed, button.”
3. Double-tap anywhere on the screen to activate the accordion button.
4. Check that the feedback is correct, including the change in state announcement.

TalkBack on Android

1. Swipe left or right to navigate to the accordion.
2. Check that the accordion’s name, role, and state are announced. For example, “Journey duration, button, expanded.”
3. Double-tap anywhere on the screen to activate the accordion button.
4. Check that the feedback is correct, including the change in state announcement.