Welcome to more ARIA content. This post focuses specifically on aria-live regions, which announce dynamic content in conjunction with Javascript. The most common use of this tool is in forms that change based on user inputs.
The aria-live attribute itself has three settings: off, polite, and assertive. By default, elements are assumed to have aria-live=off applied to them, unless a specific role that uses it, such as alert, is present. Aria-live=polite is probably the most common use of the attribute; it waits for a user to pause or complete their action before announcing the dynamic change. Assertive will interrupt anything the user is currently reading; generally, this should only be used for critical information such as a timeout. Note that this attribute can applied to different elements to accomplish different purposes. W3C provides an example of it being used as an alert on a <p> tag (https://www.w3.org/TR/WCAG20-TECHS/ARIA19.html) to provide feedback about errors in a form. Mozilla provides an example of a <div> having the attribute, announcing content based on a selection from a <select> field (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions).
Note the differences in the ARIA attributes present. W3C’s example uses role=alert but does not have aria-live on <p> tag as well. This is because the alert role has this functionality integrated in it. If you wanted to achieve the same effect without using that role, you would add aria-live=assertive along with a different role, such as region which creates a landmark for users to know this information is important. Other roles that have implicit live announcements are log, status, progressbar, marquee, and timer. Most of these use aria-live=polite by default.
A couple other ARIA attributes that tie into this are aria-atomic and aria-relevant. Aria-atomic, which uses true or false as its value, decides if the content provided is announced as a whole or just the parts that have changed. In the W3C example, it is set to true which means everything that appears in that <p> tag is announced together. If it was set to false or was not present, only new information that was injected (such as a new error) would be announced the next time it was read. Aria-relevant instead looks to the types of changes made to determine what is announced. It uses the values additions, removals, text, and all. In the linked Mozilla example, further down that page is an example of “additions removals” being used to announce changes in a list of users logged into a system. In this scenario, both values are present in the attribute so both filters are used. Remember, for attributes such as ARIA, class, or ID, spaces are separate values (i.e. class=”table row” is actually class=”table” and class=”row” being applied to a single element).
Aria-live is a bit trickier than other attributes since it relies on content to change in a page and you’ll need to determine how best to bring that information to the user’s attention. As stated before, assertive should really only be used when information is critical because it’s time-sensitive, a security issue, or a similar reason. For the most part, rely on polite. Lastly, make sure your Javascript is injecting content into the right region; you will likely need to use unique IDs if you are separating out areas for different dynamic content on a page.
