When the modal is activated, focus is not placed on the modal.
- Rule ID:
- User Impact:
- WCAG :
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.
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):
- 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 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.)