Alert Example

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