<h1 aria-busy="true" aria-live="polite" role="alert" class="sr-only">
Issues and how to fix them
- The element is used for communicating status updates, not to structure the page. A
alertis more suitable than a
- The heading is semantically not a
headinganymore, but an
alertcontainer. 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-busyindicates 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-busyshould be removed or set to
- “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.