Question

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

没有向JAWS用户传达信息，表明表格内容已更新，
当内容更新时，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也是一个有点过时的版本，但是如果你为一个标准化该版本的部门编写内部应用程序，你可能不得不处理它。我会建议两件事。选项一是下载已在上个月发布的12号钳口。如果这可以解决您的问题，也许您可以证明升级的合理性？选项二是调查WAI-ARIA这应该让您将表标记为实时区域并自动通知更新。我对此没有任何经验，但它可能有效。我不知道Jaws 9支持WAI-ARIA有多好，但是下颚10似乎做得相当不错。有关WAI-ARIA的屏幕阅读器支持的比较，请参阅this blog entry。您可以随时使用Jaws 9进行列出的测试，以了解WAI-ARIA支持的内容。

Answer 2

这可能无法解决您的具体问题，但如果您使用progressive enhancement实施，我认为它可以解决问题。换句话说，让你的页面导航通过传统（非ajax）链接工作，然后在这些链接上连接ajax点击事件。

如果使用非JS浏览器或屏幕阅读器，它只会导航到下一页。如果使用常规的现代浏览器，它将提供ajax体验。无障碍是在没有失去ajax体验的情况下建立的。

可访问，符合508标准的Ajax分页

2 个答案: