ARIA Live Region Test

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

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

Screen Readers with Bugs

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).