Making live regions accessible
[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]
To enable screen readers to announce UI changes as they happen, set the aria-live attribute for important content that changes dynamically. This is very helpful for blind users who need to keep their mental model of the UI in sync with UI changes.
One example where setting the aria-live attribute is important is in the classic master-detail scenario in which selecting an item in the master control dynamically loads the corresponding content in the detail area.
<div class="..." data-win-control="Win.UI.ListView" aria-label="Master"
data-win-options="{...}" ></div>
</div>
<div class="..." role="region" aria-label="Detail"
aria-live="assertive" aria-atomic="true" >
</div>
Another good example is when displaying Really Simple Syndication (RSS) feeds or messaging communication. In this case, the content container element also includes the role="log" attribute.
<div id="chat" role="log" aria-live="polite" aria-atomic="false" ></div>
For more information, see Live Region Attributes in the Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) 1.0 specification.
Note Windows Runtime apps using C++, C#, or Visual Basic also have a technique for reporting live region behavior that's similar to the HTML aria-live attribute. See AutomationProperties.LiveSetting.