Transcript
PRESENTER: This tutorial explores the aria-live attribute. We're going to cover what is aria-live, how is aria-live applied, avoiding misuse, and role equals alert.
Section one-- what is aria-live?
JavaScript provides us with many things, including dynamic interactions, such as drag and drop, resize, hide and show, open and shut, switch views, and many more. It also allows us to build non-native widgets, such as modems, in page tabs, date pickers, page loaders, sliders, and more. However, many of these dynamic interactions and non-native widgets are problematic for assistive technologies.
For example, you may want a simple notification to be dynamically inserted at the top of the page when a user completes a task. Now, this dynamically inserted notification can cause two problems for screen readers. The first one is that screen reader is buffer pages when they're loaded. Any content that's added after this time may not be picked up by screen readers. And the second problem is that screen readers only focus on one part of the page at a time. If something changes on another area of the page, screen readers may not pick this up. The aria-live attribute allows all of us to notify screen reader users when the content is updated in specific areas of the page.
Section two-- how is aria-live applied?
The aria-live attribute can be applied to any HTML element. Screen readers will then be made aware of any [INAUDIBLE] changes within that element after the page has initially been loaded. Now, the three possible values for the aria-live attribute. The first one is aria-live="off." Assistive technologies should not announce updates unless the assistive technology is currently focused on that region. The off value can be used for information that's not critical for users to know about immediately.
An example where this value could be used is for sortable tables. In this case, screen readers need to know that the content order of the table body has changed, but this information doesn't need to be announced to users.
Next up is aria-live="polite." In this case, assistive technologies will announce updates at the next graceful opportunity, such as at the end of a sentence. The polite value can be used for warning notifications when the user needs to know something. An example where this value could be used is dynamically injected messages, such as a success message. In these cases, the success message should be announced, but only at the next graceful opportunity.
And the final option is aria-live="assertive." In this case, assistive technologies will announce updates immediately. The assertive value should only be used if the interruption is imperative for users to know immediately. An example where this value could be used is, again, in dynamically injected messages, but in this case, for an error message. Screen readers should be notified immediately of the error so they can take action to address the issue.
Section three-- avoid misuse.
The aria-live attribute should not be used for dynamic content that's not critical. This just adds noise, literally, for assistive technologies.
Section four-- role="alert.”
Role="alert" is used to define a message with important and usually time-sensitive information. Some developers use both role="alert" and aria-live="assertive" for important dynamic messages, such as error messages. However, this is not needed, as elements with role="alert" have an implicit aria-live value of assertive. For this reason, developers only need to use the role="alert" attribute. This attribute also has specific semantic meaning. As it's flagged as an alert, it's announced as alert to assistive technology users.
Conclusion-- so there you have it. A simple explanation of how aria-live works.
Except where otherwise noted, this work is licensed under Creative Commons by Attribution ShareAlike 4.0 license. Copyright 2018, California community colleges chancellor's office. These works are licensed under Creative Commons attribution 4.0 international license. They are available to everyone, and may be repurposed to meet the unique needs of educational institutions.