This content originally appeared on DEV Community and was authored by Carlos Espada
The other alternative for notifying content changes is to use role="alert", which is equivalent to using aria-live="assertive" together with aria-atomic="true". So...
<div aria-live="assertive" aria-atomic="true">
<h3>Your message has been sent. We'll contact you back as soon as possible.</h3>
</div>
... is equivalent to this ...
<div role="alert">
<h3>Your message has been sent. We'll contact you back as soon as possible.</h3>
</div>
Being equivalent to using an aria-live="assertive", and therefore causing the immediate interruption of the user, the alert role should only be used for information that requires the user's immediate attention, for example:
- An invalid value was entered into a form field
- The user's login session is about to expire
- The connection to the server was lost so local changes will not be saved
There are several aspects to note when using the alert role:
- Since it is not possible to change the predefined role of an element, it is ideal to use
role="alert"in a<div>or in a<span>. - Unlike the method in the previous post, it can be used with elements that are not initially present in the DOM. When inserted with
role="alert"they will be announced immediately. - The element with the
alertrole does not have to be able to receive focus, as screen readers will automatically announce the updated content regardless of where keyboard focus when the role is added. So the alert role should only be used for static text content. - The
alertrole is added to the node containing an alert message, not the element causing the alert to be triggered.
If you want to know more, you can find more interesting information on the MDN page.
This content originally appeared on DEV Community and was authored by Carlos Espada
Carlos Espada | Sciencx (2022-01-10T07:48:43+00:00) A11y tips: alert role. Retrieved from https://www.scien.cx/2022/01/10/a11y-tips-alert-role/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.