Web 2.0, unlike the traditional static web pages, modern websites have dynamic, auto-updating content. Websites which shows the scores of live matches, stocks that update very often, online news websites showing the headlines fall in this category.
Only a small portion of the website is updated frequently. The entire page will not be refreshed. The region that is updated according to the change is called as the live region.
Accessible Rich Internet Applications (ARIA) property “Live” is used when such live regions are available on the web page. Assistive technologies such as screen readers recognize the updated content with the ARIA-live property of the live region.
The changes of the live region is intimated to the user depending on the politeness levels. The politeness of the live region decides how the updated information should be intimated to the user. ARIA-live property has the following politeness levels. In other words following are the aria-live properties.
Aria-live=”off”
This is the default behavior. No changes in the live region is intimated to the user when aria-live is set to “off”. ARIA-live=”off” is used when the changes are expected very frequently and such information is not necessary to intimate to the user. However the changes are announced to the user if the current focus of the screen reader is on the updating content.
Eg: GPS coordinates of a moving vehicle.
ARIA-live=”polite”
This politeness level is used when the user is not doing anything or when the user is waiting for the update to happen. If the user is busy with other task on the page the screen reader will not interrupt to provide the updated content of the live region.
Eg: Changes of the headlines in the news website.
ARIA-live=”assertive”
Assertive is used when the user should be intimated about the updated information when the live region is changed. The update is provided to the user interrupting the current task. Use ARIA-live=”assertive” when you think the user needs to know the information the very second it appears. To say in other words high priority updates will be marked as aria-live=”assertive”.
Eg: Validations of the form fields on the fly.
ARIA-live=”rude”
ARIA-live=”rude” is used for most critical updates. It forces the user to read the updated region as immediately as the update happens.
How do Screen readers catch ARIA-live
- ARIA-live=”off” is supported by all major screen readers. Working perfectly with NVDA on Firefox, JAWS on Firefox and internet explorer, Voiceover on IOS.
- ARIA-live=”polite” is supported by all major screen readers. Working perfectly with NVDA on Firefox, JAWS on Firefox and internet explorer, Voiceover on IOS.
- ARIA-live=”assertive” is working as expected only with voiceover on IOS. NVDA and JAWS is not interrupting with the updated content if the user is in any other task.
- ARIA-live=”rude” is working as expected with JAWS on Firefox and internet explorer but not with NVDA and voiceover.
Note: Voiceover on IOS is reading the previous message along with the currently updated message.
The test is conducted with the example on http://test.cita.illinois.edu/aria/live/index.php (external website).