When the modal is activated, focus is not placed on the modal.
Link to When the modal is activated, focus is not placed on the modal. copied to clipboard
- Rule ID:
- focus-modal-none
- 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.
Background
When a person who is blind opens a modal dialog and keyboard focus is not moved to it, it can be extremely difficult, if not impossible, to know that the modal dialog has appeared and to interact with it. Keyboard focus must be moved to an appropriate place in the modal dialog. This allows screen readers to announce the modal dialog and allow users to interact with the modal dialog with the keyboard.
How To Fix
Fix this issue by moving focus to one of the following modal dialog elements (the content of the modal dialog will determine where focus should be placed):
- Recommended method: The heading/title: If the modal dialog contains heading text, move focus directly to the heading text. This method can be used regardless of the type of content it contains as long as it has a visible heading/title. Be sure to add tabindex="-1" to the heading/title container so JavaScript can put focus on it.
- The first action button: If the modal dialog contains a brief amount of text before the action buttons, you can move focus directly to the first active element. (If you do this, you will need to use the aria-describedby attribute appropriately on the role="dialog" container to ensure the text content is read when the dialog is opened.)
- The text content: If the modal dialog starts with longer text content but does not have a visible heading/title, you can place focus on the text or first paragraph of text. Be sure to add tabindex="-1" to the text container so JavaScript can put focus on it.
- The first form field: If the modal dialog primarily exists to collect information from the user, you can move focus directly to the first form element. (If the modal dialog contains brief instructions before the form, you will need to use the aria-describedby attribute appropriately on the role="dialog" container to ensure the instructions are read when the modal dialog is opened.)