Checkbox

Accessibility testing

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

Keyboard testing

1. Use the ‘Tab’ key to navigate to the checkbox.
2. Make sure that the checkbox receives focus and the expected focus state is presented.
3. Press ‘Space’ to toggle the checkbox state (checked / unchecked).
4. Check there is visual feedback to indicate the state of the checkbox.
5. Upon submission, check that the outcome aligns with expectations, such as a filter being applied or an option being selected.
6. For required checkboxes, if the checkbox is not checked upon submission, ensure there is a clear error message to inform the traveller that the checkbox is required.

Screen reader checks

NVDA on Chrome

1. Navigate to the checkbox to test. This can be done in two ways:
• Open the elements list by pressing the NVDA key + F7 and using arrow keys to move to the ‘Form fields’ menu
• Press ‘X’ to move to the next checkbox
2. Check that the checkboxes name, role and state are announced. For example, “Clickable, Direct flights, check box, not checked”.
3. Press Space to toggle the checkbox state (ticked / unticked).
4. Check that the state change is announced.
5. For required checkboxes, ensure that ‘required’ is also announced, and if the checkbox is not checked upon submission, ensure there is a clear error message to inform the traveller that the checkbox is required. The focus should remain on the checkbox.
6. In instances, where feedback is immediate (for example, filters on a results page), ensure that any page changes are notified to the screen reader user.

VoiceOver on Safari

1. Navigate to the checkbox 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 checkbox
2. Check that the checkboxes name, state and role are announced. For example, “Direct flights, ticked, tickbox”.
3. Press CTRL + OPT + Space to toggle the checkbox state (ticked / unticked).
4. Check that the state change is announced.
5. For required checkboxes, ensure that ‘required’ is also announced, and if the checkbox is not checked upon submission, ensure there is a clear error message to inform the traveller that the checkbox is required. The focus should remain on the checkbox.
6. In instances where feedback is immediate (for example, filters on a results page), ensure that any page changes are notified to the screen reader user.

VoiceOver (iOS)

1. Swipe left or right to navigate to the checkbox.
2. Check that the checkboxes name, role and state are announced. For example, “Direct flights, from £123, selected, button”.
3. Double-tap anywhere to toggle the checkbox state (ticked / unticked).
4. Check that the state change is announced.

Talkback on Android

1. Swipe left or right to navigate to the checkbox.
2. Check that the checkboxes name, role and state are announced. For example, “Direct flights, from £123, ticked, tickbox”.
3. Double-tap anywhere to toggle the checkbox state (ticked / unticked).
4. Check that the state change is announced.