Description
We discussed about live regions(aria-live) in the past and this post also related to the live region itself. Before we understand aria-atomic, let me just recap what is the live region all about. When parts or portion of the web page gets updated without reloading the entire page and that portion of page is set to aria-live then those areas are called as live regions. To simplify further, whatever the changes that are happening to the element/container that has aria-live with appropriate token values(assertive/polite) are going to be communicated/notified to the screen reader users. However, here is the tricky thing. The underlying fact with aria-live with assertive/polite token values is that aria-live just notifies changes alone, but not the entire content that is present in the live region. You might be thinking that What is the big deal if entire content in the live region is not communicated to the screen reader users. Let me explain this with simple example. I think most of us do shopping on the ecommerce website for one or other things these days. While doing shopping on the ecommerce site, it is common that, whatever the products that we like, we add to the cart. As soon as the product gets added to the cart, it is obvious for the visual users that product has been added to the cart. To communicate the same to the screen reader users, we set aria-live to assertive/polite for the dynamic container. Do you think aria-live alone with assertive/polite is going to solve the purpose? Answer is not to the full extent. The reason is that the changed content of the dynamic container is going to be communicated to the screen reader users when live region is set but entire content in the dynamic container is not going to be communicated. This may create some problems for the users in understanding the live updates. Let us understand what problem we are going to face. When product gets added to the cart then screen readers notify the live updates like “1” or “2” or “3” or something like that. Do you think this type of notification is understandable? Answer is no. to make same notification understandable, screen reader should reread the entire content in the live region live “your basket contains 1” or “your basket contains 2” or “your basket contains 3” or something like that. To reread the entire content in the live region as and when user activates add to cart, aria-live alone is not going to help, and this is kind of problem.
To address this problem, aria introduces aria-atomic attribute. Aria-atomic indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute(We will discuss about aria-relevant attribute in the future blog posts). To put this simpler, when aria-atomic is set to true for the same shopping cart live region and product gets added to the cart then screen readers reread the entire content like “your basket contains 1” or “your basket contains 2” or something like that. This kind of announcement is pretty much understandable instead of just announcing like “1” or “2” when user activates add to cart element. Aria-atomic attribute accepts 2 values and they are true and false.
Author notes
- Aria-live can be used on any base markup and it is the global attribute
- The default value of aria-atomic is false for all elements
- Authors need to set the value of aria-atomic as true only when the entire content in the live region along with the label of the live region(if exists) needs to be reread by assistive technologies.
- If author sets explicitly aria-atomic as false, then assistive technologies stop searching up ancestor chain and present the changed node to the user
- If author does not set aria-atomic attribute itself in the live region then assistive technologies, consider the default value of aria-atomic as false and present the changed node to the user.
Sample code snippet
<h2>Basket summary</h2>
<div aria-live=”assertive” aria-atomic=”true”>
<p>Your basket contains <span id=”quantity”>0</span> items.</p>
</div>