Alert

An alert is a message that communicates important feedback to the user in response to an action or event. There are two variants: a status message for non-critical updates and an alert message for errors or urgent information.

Alerts use ARIA live regions to announce their content to screen readers automatically when they appear in the page, without requiring the user to navigate to them.

The browser provides native input error messages when input fields are wrapped inside a <form> element (See the Form page for more information).

Accessibility Features

  • role="status" announces non-critical updates politely. Screen readers wait until the user is idle before reading the message.
  • role="alert" announces urgent messages, like errors or warnings, assertively. Screen readers interrupt the current task to read the message immediately. The messages must clearly describe the nature of the detected issues.
  • The alert container must be present in the page before the message appears. Screen readers only announce changes within the container, so it must only be hidden visually, not removed from the DOM.
  • When an input error causes the alert message, the invalid field should be marked with aria-invalid="true" to communicate its state to screen readers. The field should also be associated with its error message using either aria-errormessage or aria-describedby.
  • Focus management should not be combined with live region announcements, since screen readers prioritize focus changes and may not announce the live region. Generally, only one approach should be used: either focus should be moved to the first incorrectly filled field (in this case, the field must have an associated error message), or the live region should be relied on to announce the error.

Example

Set the quantity to 0 and click Add to cart to see the alert message. Add one or more items to see the status message.

Code Snippet