A type of dialog that contains an alert message, where initial focus goes to an element within the dialog.

An alertdialog role is also used to alert the user with a message. Unlike the alert role, the user can interact with the message. The initial focus goes to an element in the alert and user can navigate within the alert dialog box using keyboard and mouse. Developers should take care that the keyboard and mouse interactions are within the alert dialog when it is opened. Provide the alert message to the user with aria-describedby property to ensure that the message is conveyed to the screen reader user.

For example, when you delete a file or folder from the recycle bin in the windows operating system an alert is displayed asking the user "Are you sure you want to permanently delete this item?" Providing the focus on "Yes" button. When you access the same dialog box using the JAWS or NVDA screen reader it will read the file name, file type etc but it will not read the message "Are you sure you want to permanently delete this item?" Using aria-describedby property will help in overcoming such problems.

The alertdialog role goes on the node containing both the alert message and the rest of the dialog. Content authors should make alert dialogs modal by ensuring that, while the alertdialog is shown, keyboard and mouse interactions only operate within the dialog.

When the alert dialog is displayed, authors should set focus to an active element within the alert dialog, such as a form edit field or an OK button. The user agent should fire a system alert event through the accessibility API when the alert is created, provided one is specified by the intended accessibility API.

Authors should use aria-describedby on an alertdialog to point to the alert message element in the dialog. If they do not, assistive technologies will resort to their internal recovery mechanism to determine the contents of an alert message.