Modal Dialog

Success Criteria:

Description Dialog is described by a title
Role Identifies as a dialog or modal
Relationships n/a
State n/a
Focus When open, focus is trapped inside dialog, focus returns to launch button on close
Action Escape key closes, enter/space activates close button

Keyboard & Screenreader Support

Tab Moves focus to next focusable element inside the dialog. When focus is on the last focusable element in the dialog, moves focus to the first focusable element in the dialog.
Shift + Tab Moves focus to previous focusable element inside the dialog. When focus is on the first focusable element in the dialog, moves focus to the last focusable element in the dialog.
Escape Closes the dialog, returns focus to the element that launched the modal

Custom Element

While there is a native <dialog> element, it does not have sufficient browser support at this time.

Description Requires extra work

  • The modal window has a descriptive value for either:
  • aria-label or
  • aria-labelledby="heading-id"

Role Requires extra work

  • role="dialog" or
  • aria-modal="true"

Relationships Requires extra work

  • aria-labelledby="heading-id" will effectively announce the title of the modal

State Requires extra work

  • aria-hidden="true" when the modal is closed
  • Css property display: none; will effectively remove it from the DOM as well.

Focus Requires extra work

  • when the modal dialog opens, keep and store a reference to the UI control (usually a button) that opened the modal.
  • move focus to the modal dialog – there must be at least one focusable control within the modal window.
  • "trap" focus within the dialog
  • when the modal closes, move focus back to the UI control that opened the modal.

Actions Requires extra work

  • Escape
  • Tab / Shift-tab / swipe