Modal dialog example

This page demonstrates an accessible modal dialog. The dialog is closed by default. Use the "Open Dialog" button in the header (it has the class "trigger").

Guidelines demonstrated

  • Keyboard operable: Tab to open, Tab/Shift+Tab inside the dialog, Escape to close.
  • Focus is trapped in the dialog while open and returns to the trigger when closed.
  • All interactive elements have visible labels.
  • Contrast and forced-colors support.