Dialog

Accessibility testing

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

Keyboard testing

1. Use the ‘Tab’ key to navigate to the button that opens the dialog and press ‘Space’ or ‘Enter’ to activate it.
2. Check that that focus is on the dialog’s first focusable element (e.g., the close button).
3. Use the ‘Tab’ key to move through all focusable elements within the dialog. Make sure each element has a visible focus state.
4. Make sure that the focus doesn’t move to elements outside the dialog while it is open, confirming that the focus is locked within. For web applications, the browser's interface should remain accessible.
5. Press the ‘ESC’ key to dismiss the dialog. For non-dismissible dialogs, check that the dialog remains open and requires a specific action to be dismissed.
6. If the dialog was dismissed, check that the focus returns to the button that launched the dialog.
7. Reopen the dialog, navigate to the close button, and press ‘Enter’ or ‘Space’ to activate it, making sure the dialog is dismissed.

Screen reader checks

NVDA on Chrome

1. Navigate to the button that opens the dialog.
2. Press the ‘Space’ or ‘Enter’ button to activate the button and open the dialog.
3. Check that the dialog name and role are announced. For example, “Dialogue box, remove hotel?”.
4. Use the up and down arrows to navigate through all elements within the dialog.
5. Make sure that NVDA announces each element and you can only reach content contained within the dialog.
6. Move to the button to dismiss or cancel the dialog.
7. Press ‘Space’ or ‘Enter’ to activate the button and dismiss the dialog.
8. Check that the focus returned to the button that launched the dialog.

VoiceOver on Safari

1. Navigate to the button that opens the dialog.
2. Press ‘CTRL’ + ‘OPT’ + ‘Space’ to activate the button, and open the dialog.
3. Check that the dialog name and role are announced. For example, “Remove hotel? web dialog”.
4. Use ‘CTRL’ + ‘OPT’ + arrow keys to navigate through all of the elements within the dialog.
5. Make sure that you only reach the content contained within the dialog.
6. Move to the button to dismiss or cancel the dialog.
7. Press ‘CTRL’ + ‘OPT’ + ‘Space’ to activate the button, and dismiss the dialog.
8. Check that the focus returned to the button that launched the dialog.

VoiceOver on iOS

1. Swipe left or right to navigate to the button that opens the dialog.
2. Double-tap anywhere on the screen to activate the button.
3. Check that the first element is announced. For example, “Remove hotel? heading”.
4. Swipe left and right to ensure you can only reach the content contained within the dialog.
5. Swipe to the button to dismiss or cancel.
6. Double-tap to close the dialog.

TalkBack on Android

1. Swipe left or right to navigate to the button that opens the dialog.
2. Double-tap anywhere on the screen to activate the button.
3. Check that the first element is announced. For example, “Remove hotel? heading”.
4. Swipe left and right to make sure you can only reach the content within the dialog.
5. Swipe to the button to dismiss or cancel.
6. Double-tap to close the dialog.