Use case

The Dialog widget requires roles, ARIA properties, and expected keyboard support to meet accessibility compliance requirements outlined in the Web Content Accessibility Guidelines (WCAG).

Proposal

WAI-ARIA Roles, States, and Properties

• The element that serves as the dialog container has a role="dialog"
• All elements required to operate the dialog are descendants of the element that has role="dialog"
• The dialog container element has aria-modal="true"
• Provide a label for the dialog by using aria-label OR aria-labelledby="[IDREF]" on the container element, with [IDREF] referencing the unique ID of the element that describes the purpose of the dialog

Focus management

• Set focus to either the dialog’s main heading or the first interactive element within the dialog. There must be a visible focus indicator.
• Maintain focus within the modal dialog until the dialog is closed.
• Upon closing the dialog, send focus back to the control that prompted it, or to the next logical place on the page. There must be a visible focus indicator.

Keyboard navigation

• Tab:
  • Moves focus to the next tabbable element inside the dialog.
  • If focus is on the last tabbable element inside the dialog, moves focus to the first tabbable element inside the dialog.
• Shift + Tab:
  • Moves focus to the previous tabbable element inside the dialog.
  • If focus is on the first tabbable element inside the dialog, moves focus to the last tabbable element inside the dialog.
• Esc: Closes the dialog.