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

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST announce changes to the live regionsupportedsupportedsupportedsupportedsupportedsupportedsupportednonesupportedsupportedsupported
MUST convey the implicit aria-live value of assertive by interrupting the current announcementnonenonesupportedsupportedsupportedsupportedsupportednonesupportedsupportedsupported
MUST convey the implicit aria-atomic value of true by announcing the entire regionsupportedsupportedsupportedsupportedsupportedsupportedsupportednonepartial (1/2)supportedsupported
MAY convey its name and role as part of the live announcement if it has a namepartialpartialsupportedsupportedpartialpartialsupportednonepartialnonesupported
MAY convey its name and role while navigating the page if it has a namenonenonenonenonenonenonenonepartialpartialnonesupported

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

Name From

  • author

Implicit Value

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

Semantic HTML

No HTML element equivalent.

Reference

Share A11Y Love

Leave a Reply

Your email address will not be published.