Code example
Common baseline
Set role and aria-live
Use role="alert" with aria-live="assertive" for urgent messages, or role="status" with aria-live="polite" for non-urgent status updates.
Insert content dynamically
The live region container must exist in the DOM before content changes. Render an empty container and update its text to trigger announcements.
Do not move keyboard focus
An alert live region must not steal focus from the user's current position. Keep focus where it is.
Do not rely on color alone
Communicate severity (success/error/warning/info) with text or an icon, not color alone.
Use aria-atomic
Set aria-atomic="true" so screen readers announce the whole message together when only part of it changes.
Avoid overusing assertive
role="alert" / aria-live="assertive" interrupts the user. Reserve it for genuinely urgent messages like errors.
Hide the live region visually
When the visual UI lives elsewhere, keep the live region in the DOM with an sr-only class so screen readers still announce the message.
Pre-rendered alerts on page load
A role="alert" element already in the DOM on page load will not be announced by most screen readers. Insert it dynamically.
Interactive elements inside the live region
Placing buttons or links inside a live region makes screen reader behavior unpredictable. Use the toast pattern when interaction is required.
Auto-dismiss behavior
Auto-dismissing notifications belong to the toast pattern. This pattern covers persistent status messages only.
Design system implementations
Additional checks
Convey type with severity
The severity prop (success, error, warning, info) on MUI Alert automatically applies matching icons and colors, conveying the type through non-color means.
Verify role="alert" default behavior
MUI Alert uses role="alert" by default. For non-urgent messages, change it to role="status".
Code sample
Implementation notes
- –MUI Alert uses role="alert" by default, immediately announcing to screen readers.
- –The severity prop automatically displays an appropriate icon, conveying type through non-color means.
- –AlertTitle adds a heading for better message structure.
- –The variant prop supports filled, outlined, and standard styles.