aria-relevant when replacing entire table contents

Question

I'm testing some of my accessibility implementations using JAWS and noticed that for one of my tables, the entire table gets read every time one row gets added, despite the use of aria-relevant=additions.

The relevant markup is as follows:

<table role=log aria-live=polite aria-relevant=additions>
    <thead>
        <tr>
            <th scope=col>Name</th>
            <th scope=col>Time</th>
            <th scope=col>Comment</th>
        </tr>
    </thead>
    <tbody id=eventComments></tbody>
</table>

Now the code to update the table is done through an AJAX request that pulls all of the comments and plops it into the tbody:

window.setInterval(function() {
    $.ajax({
        type: 'GET',
        url: 'event.php',
        data: {
            eventID: ...
            page: 'getComments'
        },
        dataType: 'html',
        success: function(data) {
            $('#eventComments').html(data);
        }
    });
}, 10000);

So the first comment would return, for example:

<tr><th scope=row>Richard</th><td>2014-01-11 01:01:00</td><td>Security check in</td></tr>

When there are two comments, the data would look like:

<tr><th scope=row>Justin</th><td>2014-01-11 01:18:31</td><td>Equipment failure</td></tr>
<tr><th scope=row>Richard</th><td>2014-01-11 01:01:00</td><td>Security check in</td></tr>

Every time an update occurs, the entire table is read out whereas I just want the newly added rows to be read. In fact, the entire table is read out every 10 seconds even when no new rows are added! I know that prepending rows using .prepend() is a possibility, but it would not be feasible to retrieve just new rows from the server.

Is there a way to still retrieve all rows from the server and tell the screen reader to read only the new rows?

Answer 1

The best solution would be to retrieve only the new rows from the server, as the response would be smaller and probably faster. However if this is impossible, you could get the old rows from the DOM and subtract them from the data retrieved from the server using the replace method. Then you could use prepend to add just the new rows to the DOM, which should result in JAWS announcing only the new rows.

window.setInterval(function() {
    $.ajax({
        type: 'GET',
        url: 'event.php',
        data: {
            eventID: ...
            page: 'getComments'
        },
        dataType: 'html',
        success: function(data) {
            // strip the old rows from the data retrieved from the server
            var oldRows = $('#eventComments').html();
            var reg = new RegExp(oldRows,"g");
            var newRows = data.replace(reg,"");
            $('#eventComments').prepend(newRows);
        }
    });
}, 10000);