8. Dialogs

Requirement

Modal dialogs correctly retain keyboard focus when open and can be closed via the keyboard.

Evaluation Process

There are multiple solutions for ensuring dialogs/modals are accessible, however, the focus for this evaluation process is on these few critical outcomes.

• Focus Shifts: When activating the dialog, the focus shifts to it so the user can interact with the elements inside immediately.
• Focus Trapped: When a dialog is opened, the user's focus needs to be trapped within it until they dismiss the dialog. A user should not be able to interact with any element outside of the dialog.
• Easily Closable: Every dialog needs to be dismissible using the keyboard alone to close it. This could be by pressing the escape key, a button or other control, or another method as long as the user can dismiss the dialog with just the keyboard.
• Focus Returns Correctly: When closing the dialog, the focus needs to return to the control that opened it or another logical place, like new content that was the result of the user interacting with the dialog. The focus should not be back to the top of the page.

Scoring Guide

• Pass: Focus is shifted to the dialog and traps focus within the dialog window. It can be closed using the keyboard and, when dismissed, the focus returns to an appropriate location on the initial page.
• Partial Fail: The focus returns to the top of the page or somewhere else inappropriate on the page when dismissing dialogs.
• Fail: Dialog does not trap focus, is not easily closed using the keyboard, or does not return focus to a logical place on the initial page when closed.
• Not Applicable: There are no dialogs/modals on the site.
• Unknown: No dialogs/modals were found during testing, but it is possible there might be some outside the scope of the testing. ​

More Information

• W3C Modal Dialog Example

Relevant WCAG Information

• Understanding SC 2.4.3 Focus Order
• Understanding SC 2.1.2 No Keyboard Trap