Modal Dialogs
Notes on Implementation
We implement Bootstrap’s Modal component, with some tweaks to the visual appearance. The documentation for Bootstrap Modals is applicable.
Accessibility Notes
Modal dialogs will have a role="dialog"
or role="alertdialog"
on their container div element. The dialog’s name must be designated by an aria-labelledby reference to the first heading in the dialog or an aria-label. An aria-describedby attribute can also be used if more information is needed to be conveyed.
- A regular dialog (
role="dialog"
) should be used for form-like content in a dialog. - An alert dialog (
role="alertdialog"
) should be brief, and all text should be associated with the dialog, using aria-labelledby and/or aria-describedby.