Making live regions accessible

Applies to Windows and Windows Phone

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.

Related topics

Meeting basic accessibility requirements

 

 

Show:
© 2014 Microsoft. All rights reserved.