WAI-ARIA: Role=Alert

A message with important, and usually time-sensitive, information.

Description

A type of live region with important, and usually time-sensitive, information. See related alertdialog and status.

Alerts are used to convey messages to alert the user. In the case of audio warnings this is an accessible alternative for a hearing-impaired user. The alert role goes on the node containing the alert message. Alerts are specialized forms of the status role, which will be processed as an atomic live region.

Alerts are assertive live regions and will be processed as such by assistive technologies. Neither authors nor user agents are required to set or manage focus to them in order for them to be processed. Since alerts are not required to receive focus, content authors SHOULD NOT require users to close an alert. If the operating system allows, the user agent SHOULD fire a system alert event through the accessibility API when the WAI-ARIA alert is created. If an alert requires focus to close the alert, then content authors SHOULD use alertdialog instead.

Elements with the role alert have an implicit aria-live value of assertive, and an implicit aria-atomic value of true.

Screen Reader Support For Role=Alert

Role=Alert Example

HTML Example

<button id="alert-trigger">Trigger Alert</button><div id="example" role="alert">

The following script element contains the content that will be inserted into the alert element.

<script type="text/template" id="alert-template">
<p><span lang="da">Hej</span>, hello, <span lang="it">ciao</span>, <span lang="ja"> こんにちは </span>, <span lang="ko"> 안녕 </span></p></script>

Another HTML Example

<div class="errors" role="alert" aria-relevant="all"><ul></ul></div>

Characteristics

Superclass Role

• section

Subclass Roles

• alertdialog

Inherited States and Properties

• aria-atomic
• aria-busy (state)
• aria-controls
• aria-current (state)
• aria-describedby
• aria-details
• aria-disabled (state)
• aria-dropeffect
• aria-errormessage
• aria-expanded (state)
• aria-flowto
• aria-grabbed (state)
• aria-haspopup
• aria-hidden (state)
• aria-invalid (state)
• aria-keyshortcuts
• aria-label
• aria-labelledby
• aria-live
• aria-owns
• aria-relevant
• aria-roledescription

Name From

• author

Implicit Value

• Default for aria-live is assertive.
• Default for aria-atomic is true.

Semantic HTML

No HTML element equivalent.

Reference

• WAI-ARIA 1.2 Specification
  Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=alert.
• A11Y Support
  The screenreader compatibility for each of the ARIA attributes is taken from the A11Y Support. Please refer to the original source if screenreader compatibility is updated for role=alert.