ARIA: alert role

The alert role is for important, and usually time-sensitive, information. The alert is a type of status processed as an atomic live region.


The alert role can be used to tell the user an element has been dynamically updated. Screen readers will instantly start reading out the updated content when the role is added. If the user is expected to close the alert, then the alertdialog role should be used instead.

One of the five live region roles, the alert role is used to provide the user with important, and usually time-sensitive, information, and often to tell the user an element has been dynamically updated.

The alert role is added to the node containing an alert message, not the element causing the alert to be triggered. Alerts are assertive live regions. Setting role="alert" is equivalent to setting aria-live="assertive" and aria-atomic="true". They don't receive focus, and therefore focus does not need to be managed and no user interaction should be required.

The most important thing to know about the alert role is that it is for dynamic content. It is perfect for situations such as when a user fills out a form and JavaScript is used to add an error message - the alert would immediately read out the message. It should not be used on HTML where the user hasn't interacted with it. For example, if a page loads with multiple visible alerts scattered throughout, none would be read because they are not dynamically triggered.


If an element has role="alert" and display: none; , when the display value is changed with CSS or JavaScript, it automatically triggers the screen reader to read out the content.

<p role="alert" style="display: none;">The alert will trigger when the element becomes visible.</p>

While triggering an alert via CSS alone is possible, it is better to rely on JavaScript because it has more browser/screen reader support and is often more appropriate as part of a larger user interaction such as inside an event handler or form validation.

With JavaScript, developers control the adding and removing of alerts as appropriate.

<button type="button">Trigger alert</button>
<p class="alert">The alert will trigger when the button is pressed.</p>
const btn = document.querySelector('button');
btn.addEventListener('click', triggerAlert);

function triggerAlert() {
  var alertEl = document.querySelector('.alert');
  alertEl.setAttribute("role", "alert");

The alert role should read out content that has changed, or bring the user's attention to it immediately, so it should not be used for static content or used regularly. Alerts, by definition, are disruptive. Several alerts at once and unnecessary alerts create bad user experiences.


Specification Status
Accessible Rich Internet Applications (WAI-ARIA) 1.1
The definition of 'Alert' in that specification.
WAI-ARIA Authoring Practices 1.2
The definition of 'Log' in that specification.
Working Draft

See also