Component Library

Modal Dialog

Issue Description

When a modal dialog is opened;

  • user focus is not taken to the dialog.
  • the content of the dialog is not announced to assistive technology.
  • user focus does not remain in the dialog, the user is able to navigate to background content with the dialog open.
  • the dialog does not have a label.

Recommendation

When a modal dialog is used to convey information to users, ensure that user focus is taken to the message and remains in the modal dialog until the user takes action, if necessary. New modal content should be announced dynamically, with an ARIA alert if necessary.

  • The user should not be able to access page content behind the dialog until it is closed.
  • A dialog should have a label.

https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/dialog