A recent post from u/Tech_GlobalTrek inspired me to write this up.
I've been enjoying the coverage of the Mutua Madrid tennis tournament with my wife. The
$1 site has a wonderfully speedy set of live scores for active tennis matches and, unlike many other sites I've used, there is a summary box beneath each match with the latest game update in text-form. Combine this with television or radio streaming for the sound, and you get a pretty good idea of what's happening on-court.
Of course NVDA, which I use, doesn't know I want to read these boxes. Lots of the page content updates automatically, and there can obviously be quite a few matches going on at any given time.
a little tinkering has resulted in the following fragment of JavaScript code. the code basically loops through the matches on the page, queries the user as to whether or not they want the match monitored and, if they do, sets the descriptive text item to a polite ARIA-region. Basically, if you say OK to one of the matches on the page and leave your focus in the browser, NVDA and JAWS will read that info as it comes in, rather than you having to move your cursor over it afresh.
To try it out, visit ATPTour.com and check there are ongoing matches - they appear as headings with tables of updating scores. Open your browser's debug console (f12 usually) and paste the code at the bottom of the post. You'll get a prompt for each match, OK will turn on the monitoring. Obviously, closing the tab or refreshing the page will lose the code and revert to the page's standard behaviour.
If anyone has any improvements, I'm all ears. JavaScript is not my native language. The current tournament finishes on Sunday.
The code follows.
```
scores = document.getElementsByClassName("scores-table")
for (let i = 0; i < scores.length; i++) {
match=scores[i];
let players=match.getElementsByClassName("scoring-player-name")
if (players.length ==4) {
players=players[0].innerText+" and "+ players[1].innerText +" versus "+ players[2].innerText+" and "+ players[3].innerText;
} else {
players=players[0].innerText+" versus "+ players[1].innerText;
}
players="Monitor "+ players+"? OK for yes, cancel for no.";
if (confirm(players)) {
match.getElementsByClassName("match-info-row")[0].setAttribute("aria-live","polite");
}
}
```