易于访问、符合 508 标准的 Ajax 分页

Question

我正在尝试使支持 Ajax 的表分页符合 508 标准（可使用 JAWS 版本 9 进行访问）。我有一个表头单元格，其中包含一个链接，该链接执行 jQuery ajax 请求 onclick 并带有回调来更新表。我已经成功地在链接正文中使用“间隔”图像，并使用替代文本向 JAWS 用户传达排序信息（注意：JAWS 默认情况下不读取工具提示），但视力正常的用户看不到。但是，当 JAWS 用户导航到链接（使用向上和向下箭头键）并按空格键来初始化链接 onclick 事件时，我遇到两个问题：

1. 没有向 JAWS 用户传达表明表内容已更新的信息，
2. 当内容更新时，JAWS 用户刚刚执行的链接会被重新读取，但它会重新读取表更新之前的替代文本，用户必须前进到下一个字段，然后返回到链接让 JAWS 读取更新后的替代文本。

任何具有实现无障碍 Ajax 分页经验的人都将不胜感激！我的表头单元格代码如下：

<th title="Sorted column, toggle sort from Ascending to Descending" controller="xxxManagement" id="xxxName" scope="col" class="sortable sorted asc" >
    <a href="/app/xxxManagement/listXXX?max=20&sort=name&order=desc" onclick="toggleLoadingAnimation();jQuery.ajax({type:'POST',data:{'controller': 'xxxManagement','max': '20','sort': 'name','order': 'desc'}, url:'/app/xxxManagement/listXXX',success:function(data,textStatus){jQuery('#xxxList').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){},complete:function(XMLHttpRequest,textStatus){toggleLoadingAnimation()}});return false;" title="Sorted column, toggle sort from Ascending to Descending">
        Name
        <img src='/app/images/pixel.gif' alt='Sorted column, toggle sort from Ascending to Descending' />
    </a>
</th>

Answer 1

不幸的是，我认为简短的答案是你不走运。我经常遇到 Jaws 告诉我内容何时更新的问题，有时需要刷新屏幕才能更新 Jaws 的虚拟缓冲区。 Jaws 9 也是一个有点过时的版本，但如果您正在为已对该版本进行标准化的部门编写内部应用程序，您可能必须处理它。我会建议两件事。选项一是下载上个月发布的jaws 12 版本。如果这解决了您的问题，也许您可​​以证明升级是合理的？选项二是查看 WAI-ARIA 这应该让您将表格标记为实时区域并自动宣布更新。我对此没有任何经验，但它可能有效。我不知道 Jaws 9 对 WAI-ARIA 的支持有多好，但 Jaws 10 似乎做得相当不错。请参阅此博客条目比较 WAI-ARIA 的屏幕阅读器支持。您始终可以使用 Jaws 9 进行列出的测试，以了解 WAI-ARIA 支持是什么样的。

Answer 2

这可能无法解决您的具体问题，但如果您使用渐进增强来实现，我认为它会解决问题。换句话说，让页面导航通过传统（非 ajax）链接进行工作，然后在这些链接上连接 ajax 单击事件。

如果使用非 JS 浏览器或屏幕阅读器，它只会导航到下一页。如果使用常规的现代浏览器，它将提供 ajax 体验。可访问性是内置的，不会失去 ajax 体验。