← All patterns · Disclosure widgets

Dialog (modal)

Window that interrupts the page until dismissed.

Pattern

A modal dialog blocks interaction with the rest of the page until it's closed. Focus moves into the dialog when it opens; focus is trapped inside; Escape closes; focus returns to the triggering element.

Roles

  • dialog
  • alertdialog

States and properties

aria-modal
true.
aria-labelledby
Pointing at the dialog's title.
aria-describedby
Pointing at descriptive text (optional).

Keyboard interaction

Escape
Close the dialog.
Tab / Shift+Tab
Cycle focus inside the dialog (trapped).

WCAG criteria

  • 2.1.2 — No Keyboard Trap
  • 2.4.3 — Focus Order

Canonical reference

WAI-ARIA Authoring Practices Guide — Dialog (modal)

More