This page features the scoreboard of three hypothetical live games. In either game, the first team to 10 wins!
To start a game, click the button associated with that game.
Game 1: aria-atomic="false"
Kentucky0
Kansas0
Game 2: aria-atomic="true"
Duke0
North Carolina0
Game 3: Score updates written to status div, role="presentation" on everything else
Wisconsin0
Villanova0
Expected Behavior
Screen readers are expected to announce the entire scoreboard in Game 2, including both teams and their scores, each time there's an update. This is expected to be a more meaningful experience than in Game 1, in which screen readers are expected to just announce the value of the score that changed. Game 3 was created as a possible workaround for screen reader/browser combinations that fail to support Game 2, and screen readers are expected to announce the updated status text (which in a real-world application could be visibly hidden).
Observations
Screen Readers that Work
JAWS 15.0 works perfectly in both Internet Explorer 11 and Firefox 36.
NVDA 2015.1 works perfectly in Firefox.
VoiceOver in iOS8 (Safari) works perfectly.
ChromeVox 43.x in Chrome 41.x works perfectly.
Screen Readers with Bugs
<
JAWS 16.0.1925 works perfectly in Firefox, but does not seem to support live regions at all in IE11. Content changes with no announcement whatsoever. I also tried changing the status message from aria-live="assertive" to role="alert", but still no announcement. This might be unique to Windows 8, or maybe even just to my installation of JAWS; one other user has reported that things are working well using the same version of JAWS. NOTE: This has been fixed in JAWS 17.
NVDA 2015.1 reads Game 1 as expected in both IE11 and Firefox 36. It also reads Game 2 perfectly in Firefox. However, NVDA's rendering of Game 2 is buggy in Internet Explorer. In IE11, it reads the entire element as expected with aria-atomic="true". However, it reads the original content (with the original score) rather than the updated content.
NVDA in IE11 reads the live region twice each time it's updated. It does not do this in Firefox. I tried changing the Game 3 announcement to role="alert" but then NVDA does read the announcement at all (in IE11).
VoiceOver in Mac OS X 10.10.1 (Yosemite) using Safari 8.0.2 behaves somewhat as expected. However, when announcing Game 2 it sometimes does not read the content in its correct read sequence. The correct sequence would be Team1, Score1, Team2, Score2. That's the order in which these items appear in the DOM, and the order in which they appear visibly on the screen. However, VoiceOver always reads the changed score last. This is correct if Team2 scored, but if Team 1 scored it results in the following incorrect (and very confusing) sequence: Team1, Team2, Score2, Score1. Update: This continues to be a problem in VoiceOver in Safari 10.0.2, Mac OS Sierra 10.12.2.
Window-Eyes 9.1 has opposite bugs in Firefox and IE. In Firefox, it reads all games as if they had aria-atomic="false" (only the changed content), while in IE it reads all games as if they had aria-atomic="true" (all content, even in Game 1, which has aria-atomic="false"). Game 3 is read perfectly in both browsers since it has only one element that is changing.
Talkback in Android 3 on a Nexus 4 (using Chrome) announces both games randomly. Sometimes it announces just the score that has changed, and sometimes it announces the team whose score has changed plus their updated score. The latter is actually an ok interface for the current application, but it isn't correct in either scenario, and again it isn't consistent. Its behavior is identical for both games.
Conclusions
In order to get the updated scores to be read properly by VoiceOver in Mac OS X, NVDA in IE, and Window-Eyes in Firefox, the method used in Game 3 is necessary (all updated content in one container, not in separate containers within a live region parent). The container for the updated content should be marked up with aria-live rather than role="alert", since the latter does not seem to be supported at all using NVDA in IE. However, even the Game 3 method is not accessible in JAWS 16 in IE (the solution then is on users: Don't use JAWS 16 in IE).