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.

Example