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. <\/p>\n
The aria-live attribute itself has three settings: off<\/em>, polite<\/em>, and assertive<\/em>. By default, elements are assumed to have aria-live=off<\/em> applied to them, unless a specific role that uses it, such as alert<\/em>, is present. Aria-live=polite<\/em> 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<\/em> 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<\/a>) 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<\/a>). <\/p>\n Note the differences in the ARIA attributes present. W3C\u2019s example uses role=alert <\/em>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<\/em> 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<\/em>, status<\/em>, progressbar<\/em>, marquee<\/em>, and timer<\/em>. Most of these use aria-live=polite<\/em> by default.<\/p>\n A couple other ARIA attributes that tie into this are aria-atomic and aria-relevant. Aria-atomic, which uses true<\/em> or false<\/em> 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<\/em> which means everything that appears in that <p> tag is announced together. If it was set to false<\/em> 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<\/em>, removals<\/em>, text<\/em>, and all<\/em>. In the linked Mozilla example, further down that page is an example of \u201cadditions removals<\/em>\u201d 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=\u201dtable row\u201d is actually class=\u201dtable\u201d and class=\u201drow\u201d being applied to a single element). <\/p>\n Aria-live is a bit trickier than other attributes since it relies on content to change in a page and you\u2019ll need to determine how best to bring that information to the user\u2019s attention. As stated before, assertive<\/em> should really only be used when information is critical because it\u2019s time-sensitive, a security issue, or a similar reason. For the most part, rely on polite<\/em>. 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. <\/p>\n