Alert Dialog

A modal dialog that interrupts the user to communicate critical information and requires an explicit confirm or cancel response.

Demo

Activate the trigger button to open the alert dialog. Use Tab to move between the dialog's action buttons. Press Escape or activate a button to close it. Notice that focus is trapped inside the dialog while it is open.

What to Observe

Focus moves into the dialog immediately when it opens
Keyboard focus cannot leave the dialog while it is open
The dialog's title and description are announced by screen readers when focus enters
Pressing Escape closes the dialog and returns focus to the trigger that opened it
Background content is inert and cannot be interacted with while the dialog is open

Anatomy

[Anatomy image placeholder — will be added when assets are available]

Overlay / Backdrop — a full-screen layer that obscures background content and communicates that the page is blocked until the user responds
Dialog Container — the element with the alertdialog role that contains all dialog content and holds programmatic focus
Title — a heading or labelling element that names the dialog and is associated with the container so screen readers announce it on focus entry
Description — the message explaining the situation or consequence the user needs to respond to
Action Buttons — the confirm and cancel controls that dismiss the dialog and communicate the user's intent

Accessibility Behavior

Use the alertdialog role to signal to assistive technology that the dialog requires immediate user attention and response
Move focus into the dialog when it opens, placing it on the first focusable element or the dialog container itself
Trap keyboard focus within the dialog so Tab and Shift+Tab cycle only through the dialog's interactive elements
Associate the dialog's title with the container using an accessible naming technique so screen readers announce it upon entry
Support Escape as a way to dismiss the dialog and return focus to the element that triggered it
Return focus to the original trigger when the dialog closes, so keyboard users do not lose their place in the page

Common Mistakes

Using a generic dialog role instead of alertdialog, which does not communicate the urgency of the required response
Failing to trap focus, allowing keyboard users to interact with background content while the dialog is open
Not returning focus to the trigger element after the dialog closes, causing keyboard users to lose their position
Omitting a visible and programmatic title, leaving screen reader users without context for the dialog's purpose
Making the dialog closeable only by clicking outside it, which excludes keyboard-only users

Why This Matters

Alert dialogs represent high-stakes moments in an interface — confirming a deletion, acknowledging an error, or accepting a warning. When focus is not managed correctly, keyboard users may be unable to interact with the dialog at all, or may accidentally trigger actions in the background. When the dialog lacks a proper title and role, screen reader users receive no indication that they are inside a modal requiring a response. Correctly implementing this pattern ensures all users can make informed decisions before an irreversible action takes place.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.