Alert

Purpose

Alerts convey status messages about the page or a user action. They are persistent (not dismissable) and do not interrupt focus. Use them for informational, success, warning, or error states.

Usage Guidance

• Place alerts near the content they describe
• Use distinct visual treatments for each alert type
• Do not rely solely on color to communicate meaning
• Keep alert text concise and actionable

Accessibility Considerations

• Use role="alert" for dynamically injected alerts to trigger live region announcement
• For static alerts present on page load, role="alert" is optional but harmless
• Include an icon with aria-hidden="true" and ensure the text conveys the meaning independently
• Do not use role="alertdialog" unless the alert requires a user response

Keyboard Support

Alerts are not interactive. No keyboard interaction is required. If an alert includes a dismiss button, ensure it is keyboard reachable with Tab and activatable with Enter or Space.

Screen Reader Behavior

role="alert" causes screen readers to announce the content immediately when it is inserted into the DOM. This is a live region with aria-live="assertive" and aria-atomic="true" implied.

ARIA Requirements

• role="alert" on dynamically injected alerts
• aria-hidden="true" on decorative icons
• No additional ARIA is required for static alerts

Common Mistakes

• Using role="alert" on static page content (it fires on load, causing noise)
• Relying solely on color (e.g., red = error) without text indication
• Using alert for non-critical information (use role="status" for less urgent messages)

Live Examples

Code Example

<!-- Static informational alert (role="note" is appropriate for static content) -->
<div class="alert alert--info" role="note">
  <svg class="alert__icon" aria-hidden="true"><!-- icon --></svg>
  <div class="alert__content">
    <strong>Information:</strong> Your message here.
  </div>
</div>

<!-- Dynamically injected alert (role="alert" announces immediately) -->
<div class="alert alert--error" role="alert">
  <svg class="alert__icon" aria-hidden="true"><!-- icon --></svg>
  <div class="alert__content">
    <strong>Error:</strong> Something went wrong.
  </div>
</div>

.alert {
  display: flex; gap: 0.75rem; padding: 1rem 1.5rem;
  border-radius: 0.5rem; border: 1px solid transparent;
}
.alert--info  { background: #d6eaf8; border-color: #2e86c1; color: #1a3a5c; }
.alert--success { background: #d5f5e3; border-color: #1e8449; color: #14532d; }
.alert__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; }