3

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?

4

1 回答 1

2

最好的解决方案是仅从服务器检索新行，因为响应会更小并且可能更快。但是，如果这是不可能的，您可以从 DOM 中获取旧行，并使用 replace 方法从从服务器检索到的数据中减去它们。然后，您可以使用 prepend 仅将新行添加到 DOM，这将导致 JAWS 仅宣布新行。

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);
于 2014-01-13T09:34:05.437 回答