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
| Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| MUST announce changes to the live region | supported | supported | supported | supported | supported | supported | supported | none | supported | supported | supported |
| MUST convey the implicit aria-live value of assertive by interrupting the current announcement | none | none | supported | supported | supported | supported | supported | none | supported | supported | supported |
| MUST convey the implicit aria-atomic value of true by announcing the entire region | supported | supported | supported | supported | supported | supported | supported | none | partial (1/2) | supported | supported |
| MAY convey its name and role as part of the live announcement if it has a name | partial | partial | supported | supported | partial | partial | supported | none | partial | none | supported |
| MAY convey its name and role while navigating the page if it has a name | none | none | none | none | none | none | none | partial | partial | none | supported |
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
Subclass Roles
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
- W3C (opens new window)
- A11Y Support