#28 alert level 1

submitted on by Manuel

Bad code

<h1 aria-busy="true" aria-live="polite" role="alert" class="sr-only">
  Done
</h1>

Issues and how to fix them

  • The element is used for communicating status updates, not to structure the page. A div with a role of status or alert is more suitable than a h1.
  • The heading is semantically not a heading anymore, but an alert container. This can be confusing, NVDA, for example, announces “alert busy Done level 1”. Do not change native semantics, unless you really have to.
  • aria-live="polite" turns the element explicitly into a polite live region. This behavior is overwritten by role="alert" which turns it implicitly into an assertive live region.
  • For frequent updates it might be better to use a polite (role="status") and a not an assertive (role="alert") live region.
  • aria-busy indicates whether an element, and its subtree, are currently being updated. The text of the live region “Done” indicates that all the necessary updates have finished. If that's the case, aria-busy should be removed or set to false.
  • “Done” might not be descriptive enough, consider a brief but more informative status message, something like “Changes saved” or “Product added to cart”.
  • The heading/live region is visually hidden. Consider showing it because everyone might benefit from the information.

Check out the resources section at the bottom of this page for more.

Good code

 <div role="status">
   Changes saved.
 </div>

Resources