How do I code an assertive alert?

To ensure that error messages are automatically announced by assistive technology, they must be coded as assertive alerts. Typically these should only be used for messages that are significant enough to interrupt other output from a screen reader, such as an indication of an error.

Place an empty <div> on the web page and give that <div> an attribute of role="alert". To present your desired status message, inject the text (this will be the message that will be announced to users of assistive technology) into the <div> with role="alert". This will give the message an implied role of aria-live="assertive", which means that a screen reader or other assistive technology will announce it immediately.

For a deeper dive into handling error alerts and other status messages, explore the "Forms: Labels, Cues, and Errors" course from Accessible Web Academy.