Alert Example
Read This First
The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.
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.
About This Example
The below example demonstrates the Alert Pattern.
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=
|
Implicit on div |
|
|
aria-atomic=
|
Implicit on div |
|
Assistive Technology Support
Learn how to interpret and use assistive technology support data
JavaScript and CSS Source Code
HTML Source Code
To copy the following HTML code, please open it in CodePen.