Alerts are dynamic content that is injected into the page when it changes when a person using a screenreader needs to know that some state of the application has changed.

  • Use alerts sparingly.
  • If an alert is present on page load, it won’t be read automatically
    • If an element is present on page load, it is not technically an alert
  • The alert will be read by the screen reader when it becomes visible / appears in the DOM

Working examples

Error alert from an input field

Example: Alpha, Bravo, Charlie

Related alert notification entries