Usage

A dialog is intended to interrupt people so they can focus on a singular specific task:

  • Reading related important content (like “Terms & Conditions”)
  • Making a crucial decision (like “Are you sure? Yes/No”)
  • Awareness of an important message (like “You will be logged out in 5 minutes”)

What to avoid

  • Don’t use dialogs for multi-step processes or wizards unless you have a really compelling business case
    • If you’re compelled to do so, ensure progress is saved if the modal is accidentally closed
  • Do not put a modal/popup on top of a modal

Working example

Things you should know

Keyboard

  • Focus must not enter the rest of the page.
  • The escape key must close the modal.

Screenreader

  • The modal's title is announced on launch.
  • The screen reader cannot read content behind the dialog.

Annotations for dialogs

Review an accessible dialog with your developers to be certain they understand the acceptance criteria.

  • <dialog> for the modal itself
  • <button aria-label="close"> for the close button
  • h2 for the dialog title

Related dialog modal popover entries