Description
In this modern web, it is very quite common to have dynamic updates/changes on the web. If you are wondering what the dynamic changes on the web is then here is the explanation. Dynamic changes are nothing, but the parts or portion of the web page gets updated without reloading the entire page and it is as simple as that. The examples could be chat log, stock ticker, cricket score board, and so on. That said, When the dynamic changes/updates take place on the web then it is visually apparent that something is going on. However, same may or may not be communicated to the screen reader users. If the update about the changes is not communicated to the assistive technology users, then it is going to be nightmare for the users. During the dynamic changes, one can observe 2 steps. The first one is that web application or web page communicates to the user that it is currently busy with the help of some animations (such as spinner, loading, and other indicators) before actual changes take place on the web page. Basically, it indicates that we should not interact with the web page while update process is going on and need to wait till the update process is completed on the page. The second step is that actual changes display on the web page once the update process is completed. It is important that authors need to communicate these 2 steps to screen reader users to make sure that users of screen reader are not lost on the web page
ARIA introduces aria-busy attribute and aria-live attribute or live roles to communicate step1 and step2 respectively that is mentioned above. Let us discuss more about aria-busy in this post. Aria-busy Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. Aria-busy accepts 2 values and they are true and false. The default value of aria-busy is false for all elements. When aria-busy set to true for any element then it indicates that the element is being modified/updated.
Author notes
- Aria-busy can be used on any base markup and it is the global attribute
- The default value of aria-busy is false for all elements
- When
aria-busy set to true for any element then
- screen readers are not supposed to expose any of the content which is inside of that element
- It will be good if screen readers announce “busy” audibly when that element receives the focus
- if multiple changes to a live region should be
spoken as a single unit of speech then follow the below steps
- apply aria-busy at the start of updates to the region
- perform necessary updates
- remove aria-busy (or set to false) at the end of updates
- authors must set aria-busy to true until and unless all the children of the widget are loaded if the dynamic widget (live region) has any children
Sample code snippet
<div aria-live=”polite” aria-atomic=”true” aria-busy=”true”>
<span>Total: $400</span>
</div>
Complementary info on aria-busy
As discussed in the author notes section of this post, screen readers should not expose any of the content that is inside of the element that has aria-busy set to true. Except JAWS, however, rest of all other screen readers exposes the content that is inside of the element that has aria-busy set to true. Similarly, as of now, no screen readers announce busy state audibly when element that has aria-busy set to true receives the focus.