Notes on "The Reals versus The Nicks" Demo


"The Reals versus The Nicks" demo provides an example of using accessible live regions for a scoreboard. For a real deployment of such a system, the JavaScript should connect to some database with the stats of a real game in progress (in this case, the data is just randomly generated).

Overview of the Structure

The page is composed of several live regions. All of the live regions are "polite" except for the "gameClock" which is set to "off".

Accessibility Features

The "gameClock" is set to "off" since announcing the time remaining at every second would be very annoying. The rest of the regions are set to "polite". Users who are listening to this page are not expected be reading anything actively most of the time; rather they would just listen to the changing live regions as the game progresses.

Aside from the "gameClock", all the other live regions are set to "polite". When users are not reading the page, they will hear the updates being made, and it will sound something like a radio broadcast of a game in progress.

The only the td of the stats are set to "live='polite'"; the entire row is not set as a live region. As a result, only the stat change by itself will be announced. In order for users listening to this page to make sense of the numbers, the stats for each player have "labelledby='playerName'"; this will cause the AT to read the label when announcing the update, thus providing the context. Note that the appropriate column heading will be announced since the headings are th elements; th was not used for the names of the players as the names are considered both data (who is in the lineup) and headings (who the stats belong to); thus the player names are td elements (see for more information on using TD for cells that act as both data and heading).

Expected Behavior

The game lasts for 5 minutes. As players score, the team scores and the players points are updated. Updates will briefly flash to alert users to where the updates were made. At the end of the game, the winner will be declared at the bottom of the page.