Overwhelmed by WCAG success criteria?
Accessible Web RAMP is the easiest way to discover, understand, and resolve web accessibility issues
that matter most to your users.
How do I code an assertive alert?
What is the best way to 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.