替换整个表内容时与咏叹调相关
-
26-12-2019 - |
题
我正在使用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请求完成的,该请求提取所有注释并将其插入 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>
当有两个注释时,数据将如下所示:
<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()
是一种可能性,但只从服务器检索新行是不可行的。
有没有办法仍然从服务器检索所有行,并告诉屏幕阅读器只读取新行?
解决方案
最好的解决方案是只从服务器检索新行,因为响应会更小,可能更快。但是,如果这是不可能的,您可以从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);
不隶属于 StackOverflow