Text

Alert

Published on

Description

Alerts communicate urgent or important messages to the user. They are announced immediately by screen readers via live regions.

Use alerts for time-sensitive or critical information. For non-urgent contextual information, use a callout instead.

Example

Open in new tab
View HTML markup 
  <section role="alert" data-theme="fail">
  <p><strong>Assertive:</strong> message about the alert.</p>
</section>
<section role="status" data-theme="info">
  <p><strong>Polite:</strong> message about the status.</p>
</section>

Accessibility

  • Use role="alert" for assertive announcements that interrupt the current screen reader output.
  • Use role="status" (or aria-live="polite") for non-urgent status updates that wait for a pause in speech.
  • The role="alert" rarely produces the expected "alert" prefix announcement across screen readers — test with multiple assistive technologies.
  • Live region elements must exist in the DOM before content is injected for announcements to fire.
  • Prefer aria-live="polite" as the default. Reserve assertive for critical, time-sensitive information.

References

  • Callout — for non-urgent contextual information
  • Form errors — for field-level error announcements

Variables

None for alert