[英]aria-live and JAWS
我正试图让一个咏叹调生活区域与JAWS 11和IE8一起正常工作。
使用下面的代码,我可以让JAWS在单击按钮时宣布新值,但行为不是我所期望的。
<!DOCTYPE html>
<html>
<head></head>
<body>
<button onclick="document.getElementById('statusbar').innerHTML = parseInt(document.getElementById('statusbar').innerHTML) + 1">Update</button>
<div id="statusbar" aria-live="polite">0</div>
</body>
</html>
使用我的JAWS11 / IE8配置,每按一下按钮,我听到:
Click number HTML Value (after click) JAWS says ------------ ------------------------- --------- 1 1 "Update button 0" 2 2 "1" 3 3 "2"
问题,我的问题是: 如何让JAWS公布aria-live区域的当前值,而不是aria-live区域的先前值?
我也对其他屏幕阅读器如何处理这个功能感兴趣。
你的代码是正确的。 显然,已经发现了“落后1”。 从链接看起来好像使用aria-atomic="true"
可以解决问题。 但是,给定的示例在IE9和Firefox 中可以正常工作。
如果您还没有偶然发现它们,请查看codetalks和accessibleculture.org上的测试用例 。 需要注意很多微妙的差异。 测试失败时不要感到惊讶! 在过去一年左右的时间里,我遇到了一些可能对你有帮助的(不合适的)技巧。
方法1: role="alert"
alert
角色应该等同于aria-live="assertive"
,但旧版本的JAWS没有正确处理它。 查看2011年2月的这些示例 ,其中指出:
如果您希望在IE7或IE8中支持JAWS 10,最好使用role =“alert”和aria-live =“assertive”来加倍警报。 虽然这有点多余,因为根据定义,警报角色将被处理为一个自信的实时区域,这样做可以让JAWS 10自动在这两个浏览器中公布更新的警报内容。
Firefox4 +和IE9都不需要这个。 但它会是这样的:
<div id="statusbar" role="alert" aria-live="assertive">
Contents will be spoken when changed
</div>
方法2:集中强迫黑客攻击
通过动态创建DOM元素并强制关注它,您可以“欺骗”大多数屏幕阅读器阅读内容。 它是hackish,但有效......而且有点是Create和Focus示例的重点 。 简化,您可以这样做:
<div id="statusbar" role="alert" tabindex="-1"></div>
$('#statusbar')
.clear()
.append('<div>' + newString + '</div>')
.children().first().focus()
;
仅隐藏/显示内容实际上在大多数情况下工作得相当好。 但是, VoiceOver的重点在于元素,并且在再次显示时不会说出其内容。 因此,从DOM中删除它似乎是目前最简单的方法。 我不喜欢它,但事情就是这样。
如果您使用的是JAWS,我认为您还需要配置默认模式; 因为屏幕阅读器具有“只读”模式。 这个问题可以通过印刷机解决:
(Insert + z)打开/关闭只读屏幕阅读器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.