Code examples

Use alerts sparingly. The alert will be read by the screen reader when it becomes visible / appears in the DOM.

<button id="show-alert">
  Show alert
</button>

<div role="alert" class="alert inert">
  You will be signed out in 5 minutes.
</div>

Developer notes

Name

  • Inner text describes alert

Role

  • Use role="alert"

Focus

  • Focus does change when the alert appears