7.3 Modal focus order is logical
When a button triggers a modal it's immediately clear what has occurred for a sighted user. In order to let a screen reader user know focus should go in to the modal so that they hear where they now are. It's also important that focus goes to the first element in the modal so that the user only needs to navigate forward. If it starts partially down the modal the user will miss any content above it.
When a user closes a modal we want them to know exactly where they are and not have to navigate all the way back to where they were. Because of that focus should always return to the button that caused the modal to open.
WCAG 1.3.2: Meaningful Sequence Opens in a new window
Details
- When the modal opens, focus goes to the first element in the modal.
- While the modal is open, keyboard and screen reader focus do not go to anything behind the modal.
- When the modal is closed, focus goes back to the button that triggered the modal.
Examples
Curabitur sed elit quam, ut egestas libero. Phasellus a orci sed justo laoreet malesuada. Aliquam lacinia congue mattis. Pellentesque dictum ante ut neque pulvinar ultrices.