Alert

An inline notification that announces important information automatically via a live region, without requiring user interaction.

Demo

Trigger an alert using the available controls. Observe how the message appears visually and listen for how a screen reader announces it without any focus change or user action required.

Info: Your session will expire in 10 minutes.

Success: Your changes have been saved.

Warning: Some fields require your attention before continuing.

Error: Unable to process your request. Please try again.

Info: This is a dismissible information alert.

Error: This is a dismissible error alert.

Trigger Dynamic Alert

What to Observe

• The alert message is announced automatically by screen readers when it appears
• No focus shift occurs — the user's current position remains unchanged
• The alert container is present in the DOM even before content is injected
• Different alert types (such as error or success) are visually and semantically distinct
• Dismissible alerts remove themselves cleanly without disrupting focus

Anatomy

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

1. Live Region Container — the element with a live region role that is present in the DOM before any content is injected, allowing the browser to detect subsequent changes
2. Message Text — the content injected into the live region that will be announced by assistive technology
3. Status Icon — an optional visual icon indicating alert type (informational, success, warning, error); decorative icons should be hidden from assistive technology
4. Dismiss Button — an optional interactive control to close the alert, which must have an accessible name

Accessibility Behavior

• Use a live region role so that assistive technology announces the message as soon as it appears, without requiring a focus change
• Ensure the live region container is already in the DOM when the page loads; injecting the container and content simultaneously can prevent the announcement from firing
• Use an assertive live region only for urgent, time-sensitive errors; use a polite live region for general status messages that should not interrupt the user
• Do not move focus to the alert automatically — alerts are intended for passive announcements, not modal interruptions
• If the alert includes a dismiss button, ensure it has a clear and descriptive accessible name so users understand what will be dismissed
• Decorative icons or status indicators within the alert should be hidden from assistive technology to prevent redundant announcements

Common Mistakes

• Injecting the live region element and its content at the same time, which prevents many screen readers from detecting the change
• Using an assertive live region for non-urgent messages, causing disruptive interruptions during normal user activity
• Moving focus to the alert when it appears, which conflates alert behavior with dialog behavior
• Omitting an accessible name on a dismiss button, leaving screen reader users without context for what the button does
• Displaying alert content only through color or icon without accompanying text, which fails users who cannot perceive color

Why This Matters

Alerts are one of the most commonly misimplemented patterns in web interfaces. When the live region is injected at the same time as its content, screen readers often fail to announce anything — leaving blind and low-vision users completely unaware of critical status messages. Using an assertive live region inappropriately can interrupt users mid-task. Relying on color alone to convey alert type excludes users with color vision deficiencies. A correctly implemented alert reaches all users, regardless of how they access the page.

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.

Code

Reference Implementation

• Back to Home
• GitHub Code