By default, a11y-dialog behaves as a dialog: it is closable with the ESC key, and by clicking the backdrop (provided the
data-a11y-dialog-hide attribute is given to is). However, it is possible to make it an “alert dialog” for critical interactions, which would remove these features.
To do so:
role="alertdialog"on the dialog container (or replace
role="dialog"with it if you set it explicitly). This will make sure ESC doesn’t close the modal.
data-a11y-dialog-hidefrom the overlay element. This makes sure it is not possible to close the modal by clicking outside of it.
- In case the user actively needs to operate with the modal, you might consider removing the close button from it. Be sure to still offer a way to eventually close the modal.
- <div data-a11y-dialog-hide></div>
<button type="button" data-a11y-dialog-hide aria-label="Close dialog">
<h1 id="your-dialog-title-id">Your dialog title</h1>
For more information about alert dialogs, refer to the WAI-ARIA 1.1 recommendations.