DEV 6.3 – Create accessible modal dialogues
Why is this important?
Modal dialogs are content that appears on top of the main page, requiring users to interact with them before they can continue reading the main page. By contrast, non-modal dialogs do not disable the main content and users can continue to interact with the page despite their presence.
Modal dialogs present unique challenges for screen reader and keyboard users. The change between the underlying webpage and the modal overlay must be handled gracefully. Importantly, keyboard focus must stay within the modal.
Users should be able to understand how the state of the page has changed, and they must be able to navigate between states without disorientation.
Techniques
Assign the dialog container ARIA role="dialog", with aria-modal set to "true"
- The ARIA role dialog indicates to assistive technologies that a dialog has been opened;
- The aria-modal property informs assistive technologies that content outside of the dialog element should not be accessed.
Provide a description of the purpose of the modal
Use aria-labelledby to associate the dialog’s heading with the dialog.
Place focus at the beginning of the modal dialog
The first element in the modal is likely to be a heading or a “close” button. Correctly coded buttons automatically receive focus, so if your first element is a button there is no further action required. Usually, headings do not receive focus, however we can use a negative tabindex attribute to programmatically provide focus on the modal’s heading, without interrupting the tab order for users.
<h3 id="modal-title" tabindex="-1">Sign up to our newsletter</h3>
Allow users to use the Escape key to dismiss modals
Provide a dedicated close button in addition to providing Escape key control.
Return users to the part of the page they came from
Do not place focus at the beginning of the webpage when the modal is closed. Ensure focus is re-directed to the element that opened the modal dialog.
Restrict tab order solely to the modal dialogue whilst it is open
If you do not restrict keyboard and screen reader access to the modal dialogue, users will be able to navigate to links and form fields on the page behind the dialogue. It will then be difficult for them to find their way back to the dialogue in order to close it.
Tip: save time working out how best to construct a modal dialogue by checking out this very simple, accessible modal dialogue from NC State University.
Examples of good practice
Examples of bad practice
References
WCAG 2.1
EN 301 549 v 2.1.2
- 9.1.3.1 Info and Relationships
- 9.2.1.1 Keyboard
- 9.2.4.3 Focus Order