live region recommendations

[jongund]

Live regions should only be used to announce changes in content that happen asynchornously to user action, like a message posted to a real time chat, or updates to a stock price that is automatically updated on a page.

Live regions should not be used on popup menus and other content that appears due to user action to open the menu.

In single page applications should manage focus to make sure the user stays oriented to the content and purpose of the page. Putting a live region on all the dynamically changing content will be confusing and disorienting to users of assistive technology.

[mendeza]

Hi @jongund,
What would you recommend for the typical form validation cases? Please see at bottom use of aria-live="assertive", and alternatively role="alert".

<!-- Initial valid state -->
<label for="startTime">
  Please enter a start time for the meeting:
</label>
<input id="startTime"
       type="text"
       aria-errormessage="msgID"
       aria-invalid="false"> <!-- false | "" | (not present) -->
<span id="msgID" aria-live="off"> <!-- initially not visible -->
  Invalid time: the time must be between 9:00 AM and 5:00 PM"
</span>

<!-- User has input an invalid value -->
<label for="startTime"> 
  Please enter a start time for the meeting:
</label>
<input id="startTime"
       type="text"
       aria-errormessage="msgID"
       aria-invalid="true">
<span id="msgID" aria-live="assertive"> <!-- shown when needed -->
  Invalid time: the time must be between 9:00 AM and 5:00 PM
</span>
<span id="msgID" role="alert"> <!-- alternative, supposedly equivalent -->
  Invalid time: the time must be between 9:00 AM and 5:00 PM
</span>