alertdialog
Window roleA modal dialog that conveys an alert requiring the user's acknowledgment or response, like a confirmation before deleting. On open, focus moves into it and it's announced like an alert. Give it aria-labelledby for the title and aria-describedby for the message.
Used on
A dialog container conveying an urgent message that requires a response.
Required properties
aria-modal="true"aria-labelledby or aria-labelaria-describedby— points to the alert message
Accessible name
Required, via aria-labelledby or aria-label. Move focus to the least destructive action on open.
Used by components
Example
role="alertdialog"
<div role="alertdialog" aria-modal="true"
aria-labelledby="t" aria-describedby="d">
<h2 id="t">Delete 12 items?</h2>
<p id="d">This can't be undone.</p>
</div>References