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.
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.
Leave a Reply