A modal dialog is a window overlaid on the screen. Modals interrupt a user's task to either notify them of critical information or to force them to make or confirm a decision. The user must interact with the modal before returning to the main window. Modals are difficult to make accessible. Beware that open source resources that promote an accessible design may have accessibility issues. To avoid accessibility issues, use the CoTJS implementation.
...
Modals interrupt a user's task. For some users, interrupting a task can be difficult to recover from. Some users with attention issues may lose their focus on the task, some users with memory-related issues will experience disorientation, and some users may respond to the sudden, unexpected display of a modal with alarm.
...
Modals require careful focus management. Focus needs to move from the main content into the modal when opened and then released back to the main content when the modal is closed. In particular:
Modal Opened:
When some interactive element (e.g. a button) opens a modal, keyboard focus must land on the first interactive element in the modal. This is usually the modal’s Close button.
While Modal Open:
While the modal is open, users must only be able to access elements within the modal.
...
In addition to managing the TAB key so that focus only moves among the focusable elements in the modal and never leaves the modal, pressing the ESC key should close an open modal.
Modal Closed:
When the user closes the modal (either with a confirmation button, cancel button, close button, or escape key), keyboard focus should return to the interactive element that opened the modal (if it still exists).
...
When testing modals with a screen reader, specific behaviours are expected:
Modal Opened:
The modal should announce that it opened as well as announce its title.
While Modal Open:
When the modal is opened, the title and contents should be immediately read by screen readers.
While the modal is open, screen reader users must only be able to access elements within that modal. Screen reader users should never be able to “fall off” the modal such that they can read the content underneath it.
Modal Closed:
When the modal is closed, any success/fail status messages related to the modal should be announced.
In addition, the change of programmatic focus away from the modal will be announced by the screen reader. This should be the name of the interactive element that opened the modal (if it still exists). If the interactive element that opened the modal no longer exists, the new programmatic focus location is announced instead.
Resources
https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html
https://www.w3.org/TR/wai-aria-practices/#dialog_modalW3C WAI-ARIA Authoring Practices 1.1: 3.9 Dialog (Modal)