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
- W3C - Modal Dialog Example
- W3C - Alert Dialog Example
- W3C - Date Picker Dialog Example
- Paul J Adam – Accessible Modal Dialog
- Scott O’Hara – Accessible Modal Dialogs with Vanilla JS
Examples of bad practice
- WCAG Failure F85: Using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order
- 1.3.1 Info and Relationships (A)
- 1.3.6 Identify Purpose (AAA)
- 2.1.1 Keyboard (A)
- 2.4.3 Focus Order (A)
EN 301 549 v 2.1.2
- 18.104.22.168 Info and Relationships
- 22.214.171.124 Keyboard
- 126.96.36.199 Focus Order