替换整个表格内容时的 aria-relevant答案

【问题标题】：aria-relevant when replacing entire table contents替换整个表格内容时的 aria-relevant
【发布时间】：2014-01-11 07:36:25
【问题描述】：

我正在使用 JAWS 测试我的一些可访问性实现，并注意到对于我的一个表，每次添加一行时都会读取整个表，尽管使用了 aria-relevant=additions。

相关标记如下：

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

现在更新表的代码是通过一个 AJAX 请求完成的，该请求会拉取所有 cmets 并将其放入 tbody：

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

所以第一条评论会返回，例如：

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

当有两个 cmets 时，数据如下：

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

每次发生更新时，都会读取整个表，而我只想读取新添加的行。事实上，即使没有添加新行，整张表也会每 10 秒读取一次！我知道使用.prepend() 预先设置行是可能的，但仅从服务器检索新行是不可行的。

有没有办法仍然从服务器检索所有行并告诉屏幕阅读器只读取新行？

【问题讨论】：

标签： html accessibility wai-aria screen-readers jaws-screen-reader

【解决方案1】：

最好的解决方案是只从服务器检索新行，因为响应会更小并且可能更快。但是，如果这是不可能的，您可以从 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);

【讨论】：