[wp-trac] [WordPress Trac] #32600: wp.a11y.speak improvements

[WordPress Trac]

#32600: wp.a11y.speak improvements
----------------------------------+----------------------------------------
 Reporter:  afercia               |       Owner:
     Type:  defect (bug)          |      Status:  new
 Priority:  normal                |   Milestone:  Awaiting Review
Component:  General               |     Version:  4.2
 Severity:  normal                |  Resolution:
 Keywords:  has-patch dev-        |     Focuses:  accessibility, javascript
  feedback                        |
----------------------------------+----------------------------------------

Comment (by afercia):

 After some testing and research I'd recommend a couple of things:
 - `aria-live="assertive"` alone doesn't make most screen readers actually
 interrupt the current task; adding a `role="alert"` together with `aria-
 live="role-assertive"` does
 - the live regions must be present in the DOM on page load; screen readers
 don't get the "on the fly" changes on the live region attributes; makes
 sense since the `aria-live` attribute notifies browsers/screen readers to
 monitor changes ''inside'' a live region and not on the live regions
 itself

 About the last point I would recommend to have a look at this post by
 Steve Faulkner: http://www.paciellogroup.com/blog/2012/06/html5
 -accessibility-chops-aria-rolealert-browser-support/ and especially at
 [http://www.paciellogroup.com/blog/2012/06/html5-accessibility-chops-aria-
 rolealert-browser-support/#comment-1165 the enlightening conversation
 between Mr. Faulkner and Mr. Craig in the comments]. And they know what
 they're speaking about :)

 Side note: using an alert role will make some browser announce "Alert"
 before the message.

 For the ones willing to do some testing, I've prepared two demos:

 1. using two live regions: http://s.codepen.io/afercia/debug/XbzRzE?

 2. using just one live region, changing its attributes on the fly:
 http://s.codepen.io/afercia/debug/RPjVQb?

 In both demos, a total of 4 messages are dispatched to the live regions,
 one each 5 seconds. Just let your screen reader start reading out the text
 in the page and check when it gets interrupted by an "assertive" message.
 When it gets interrupted, let your screen reader start reading again (just
 use the up arrow) and check what happens after 5 seconds and so on.

 Tested in Firefox 38 + NVDA 2015.2, IE 8 + JAWS 15, Chrome 43 + ChromeVox
 45 and only the first demo (the one with two live regions) works
 consistently for me. Please notice that ChromeVox will always interrupt
 the current task, regardless the message being "polite" or "assertive".
 Not a surprise, ChromeVox has so many quirks...

 Would greatly appreciate some testing in modern IE and Safari + VoiceOver.
 Also, any feedback more than welcome.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/32600#comment:17>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform