ARIA Alert

An alert is an ARIA live region is meant for error or warning messages that appear on the screen. It is usally implied to have a aria-live value of assertive

Example 1: Visual alert

This solution works well for new and existing work.

Clicking the button below will show the current time on the screen. Since the current time text is inside an div with role="alert" and aria-live="assertive", the text will be announced immediately by screen readers.

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞