Focus is not maintained within the modal. It is possible to tab out of the modal.
Link to Focus is not maintained within the modal. It is possible to tab out of the modal. copied to clipboard
- Rule ID:
- focus-modal-moves-outside
- User Impact:
- Serious
- WCAG :
- 2.4.3.a
Rule
The reading and navigation order MUST be logical and intuitive.
Background
Modal dialogs overlay page content and prevent users from interacting with the content behind the modal dialog until it is dismissed. If sighted keyboard users or screen reader users can tab to content behind a modal dialog window, they may become disoriented or confused. Both keyboard focus and screen reader focus must be trapped within a modal dialog until it is dismissed. When both keyboard focus and browsing are trapped within a modal dialog, keyboard and screen reader users are able to interact with it as intended.
How To Fix
Fix this issue by using JavaScript to ensure the following keyboard interaction:
- Tab key:
- Moves focus to the next focusable element inside the dialog.
- If focus is on the last focusable element inside the dialog, moves focus to the first focusable element inside the dialog.
- Shift + Tab keys:
- Moves focus to the previous focusable element inside the dialog.
- If focus is on the first focusable element inside the dialog, moves focus to the last focusable element inside the dialog.
- Escape key (best practice): Closes the dialog and returns focus to the triggering element or other logical element if the triggering element no longer exists.