When the modal or similar element is closed, focus is not returned to the triggering element.
- Rule ID:
- focus-modal-not-returned
- User Impact:
- Serious
- WCAG :
- 2.4.3.a
Rule
The focus MUST be purposely moved or set (via JavaScript) onto the appropriate element when the user's action requires a change of context or location for effective keyboard or touch interaction.
The focus MUST NOT become lost or reset to the top of the page, except when loading or re-loading a page.
Background
When a modal dialog is closed, if focus is not explicitly placed back on an element, keyboard focus and screen reader focus will be lost - sometimes sending the focus back to the top of the DOM. Screen reader users may become disoriented, not hearing their new location and not knowing where their focus is. When a modal dialog is closed, focus must be placed back on the element that triggered the modal dialog or, if that element no longer exists, on another element that provides a logical workflow. This allows screen readers to announce the element that has received focus so screen reader users know where they are and allows keyboard users to interact logically with the content.
How To Fix
Fix this issue by placing focus back on the element that triggered the modal dialog or, if that element no longer exists, on another element that provides a logical workflow.