Notes

Alerts are dynamic content that is injected into the page when it changes and 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

Code examples

<label for="favorite-error">
  What is your favorite NATO letter?
  <span>Required</span>
</label>

<input type="text"
       id="favorite-error"
       aria-describedby="alert"
       required>

<div id="alert" 
     class="inert"
     role="alert">
  <!--- Use JS to inject the alert here -->
</div>

<button id="show-alert">
  Toggle error
</button>

Developer notes

  • Screenreaders do not implement alerts uniformly and must be tested
    • JAWS and VoiceOver are more generous than NVDA in triggering alert messages
    • Just because an alert pattern works in one screenreader doesn’t mean it will work in all three

Name

  • Inner text describes alert when it appears on screen

Role

  • Use role="alert" for elements injected into the page

Focus

  • Focus does move to the element when the alert appears