Expand options and explanation for aria roles on alert elements. role='alert' is assertive and will interrupt the screenreader, while role='status' maps to aria-live='polite' and doesn't interrupt.
Also, for these to work, there has to be an existing hidden live region with the aria role in the HTML into which the alert content is inserted. For example, we would need a hidden/blank div or p that an error message gets inserted into when it appears on the page if content is added dynamically without a page reload. See ARIA alert example.
Expand options and explanation for aria roles on alert elements.
role='alert'is assertive and will interrupt the screenreader, whilerole='status'maps toaria-live='polite'and doesn't interrupt.Also, for these to work, there has to be an existing hidden live region with the aria role in the HTML into which the alert content is inserted. For example, we would need a hidden/blank
divorpthat an error message gets inserted into when it appears on the page if content is added dynamically without a page reload. See ARIA alert example.