咏叹调和JAWS

时间:2011-08-02 07:39:07

标签: accessibility wai-aria jaws-screen-reader

我正在努力让aria-live区域与JAWS 11和IE8一起正常工作。

使用下面的代码,我可以让JAWS在单击按钮时宣布新值,但行为不是我所期望的。

JSFiddle of this example

<!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区域的先前值?

我也对其他屏幕阅读器如何处理此功能感兴趣。

2 个答案:

答案 0 :(得分:13)

您的代码是正确的。显然,“落后1”已经discovered。从链接看起来好像使用aria-atomic="true"可以解决问题。但是,给出的示例在IE9和Firefox中正常工作。

如果您还没有偶然发现它们,请查看codetalksaccessibleculture.org上的测试用例。需要注意很多微妙的差异。测试失败时不要感到惊讶!在过去一年左右的时间里,我遇到了一些可能对你有帮助的(不合适的)技巧。

方法1:role="alert"

alert角色supposed to be相当于aria-live="assertive",但旧版本的JAWS无法正确处理。查看2011年2月的these examples,其中说明:

  

如果您希望在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 and Focus例子。简化,您可以这样做:

<div id="statusbar" role="alert" tabindex="-1"></div>

$('#statusbar')
  .clear()
  .append('<div>' + newString + '</div>')
  .children().first().focus()
;

仅隐藏/显示内容实际上在大多数情况下工作得相当好。但是,VoiceOver的重点在于元素,并且在再次显示时不会说出其内容。因此,从DOM中删除它似乎是目前最简单的方法。我不喜欢它,但事情就是这样。

答案 1 :(得分:0)

如果您使用的是JAWS,我认为您还需要配置默认模式;因为屏幕阅读器只有&#34;只读#34;模式。这个问题可以通过媒体解决:

(Insert + z)打开/关闭只读屏幕阅读器。

http://www.mozilla.org/access/qa/win-webcontent-jaws.html