Ajax Accessibility-Dynamic content Updates

                            Dynamic Content Updates


When content changes dynamically within a web page, it may cause accessibility problems. What happens if a screen reader is currently reading an element that is updated? If the updated content is important, should you interrupt the user and set focus immediately to the new content, do you simply inform the user of the update, or do you do nothing? How do you set focus or allow the user to jump to the updated content?


With standard scripting, the developer must dictate what happens when a content update, such as an AJAX-driven feedback message, occurs. The developer can simply allow the update to occur and not inform the user of it, alert the user of the update through some sort of embedded audio sound, or can set focus directly to the updated content. The developer must script each of these situations, thus removing the control from the user.


With WAI-ARIA, the developer can identify regions that dynamically change as a live region. A live region allows content updates in a way that a screen reader understands. It also allows the developer to add additional functionality to alert the user, provide controls for the live region, determine the amount of new content that would be read, and much more.


To create a live region, the developer adds the aria-live property to the element with a value of off, polite, assertive, or rude. The value, or politeness level (or alternatively the intrusiveness level), specifies what a screen reader should do when the element is updated.


A value of off (aria-live="off") tells the screen reader to not announce the update. If/when the screen reader user encounters the updated content, it will be read at that time. This would be used for non-important or irrelevant content updates.


A value of polite will notify the user of the content change as soon as he/she is done with the current task. This might take the form of a beep or an audio indication of the update. The user can then choose to directly jump to the updated content. This value would be the most common for content updates, especially for things like status notification, weather or stock updates, chat messages, etc.


An aria-live value of assertive will result in the user being alerted to the content change immediately or as soon as possible. Assertive would be used for important updates, such as error messages


You can also define which content should be read when an update occurs. Additionally, there are special ARIA roles that define certain types of highly dynamic content, such as alerts, logs, and timers. The high level of fidelity with ARIA live regions allows great flexibility both for developers and for end users.

Hi Ashi,

This is great content.

May I suggest you create an example How-To like and post it on the forge?

Cheers