Alert Example

Important Note About Use of This Example

Note: This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

There may be support gaps in some browser and assistive technology combinations, especially for mobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
The ARIA and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.
Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.

The below example demonstrates the design pattern for alert. Activating the Trigger Alert button causes a message to be inserted into the example alert element.

Similar examples include:

Alert Dialog Example: A confirmation prompt that demonstrates an alert dialog.

Example

This is just a test. A typical alert is triggered by an event, such as an error, warning condition, or the arrival of information that is important in the context of the user's task.

Accessibility Features

Because an alert is for critical information, assistive technologies may provide special behaviors designed to help call attention to changes in the text of an alert. For example, screen readers may interrupt all other speech and preface announcement of the new alert text with a special sound or phrase.

Keyboard Support

No keyboard interaction needed.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
`alert`		`div`	Identifies the element as the container where alert content will be added or updated.
	`aria-live=assertive`	Implicit on `div`	This does not have to be declared in the code because it is implicit in the alert role. Tells assistive technologies to interrupt other processes to provide users with immediate notification of relevant alert container changes.
	`aria-atomic=true`	Implicit on `div`	This does not have to be declared in the code because it is implicit in the alert role. Tells assistive technologies to use the entire content of the alert element as the alert message even if only a portion of it has changed.

Javascript and CSS Source Code

CSS: alert.css
Javascript: alert.js

HTML Source Code

<button type="button" id="alert-trigger">
  Trigger Alert
</button>
<div id="example" role="alert"></div>
<!--  The following script element contains the content that will be inserted into the alert element. -->
<script type="text/template" id="alert-template">
  <p>Hello</p>
</script>