ARIA: alert role

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.

Description

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.

Examples

The most basic way to trigger an alert is by adding role="alert" to an element that has display: none; by default. When the display value is changed with CSS or JavaScript, it would automatically trigger 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" onclick="triggerAlert">Trigger alert</button>
<p class="alert">The alert will trigger when the button is pressed.</p> 

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

Accessibility concerns

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. Lots of alerts at once or unnecessary alerts willl create a bad user experience.

Specifications

See also

• ARIA: Alertdialog Role
• ARIA alert support - The Paciello Group
• ARIA Live Regions