简体   繁体   English

咏叹调和JAWS

[英]aria-live and JAWS

I'm trying to get an aria-live region to work correctly with JAWS 11 and IE8. 我正试图让一个咏叹调生活区域与JAWS 11和IE8一起正常工作。

Using the code below, I can get JAWS to announce the new value when the button is clicked, but the behaviour is not what I would expect. 使用下面的代码,我可以让JAWS在单击按钮时宣布新值,但行为不是我所期望的。

JSFiddle of this example 这个例子的JSFiddle

<!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>

Using my JAWS11/IE8 configuration, on each click of the button I hear: 使用我的JAWS11 / IE8配置,每按一下按钮,我听到:

Click number  HTML Value (after click)  JAWS says
------------  ------------------------- ---------
1             1                         "Update button 0"
2             2                         "1"
3             3                         "2"

The problem, and my question is: how do I make JAWS announce current value of the aria-live region, rather than the previous value of the aria-live region? 问题,我的问题是: 如何让JAWS公布aria-live区域的当前值,而不是aria-live区域的先前值?

I'd also be interested in how other screen readers will handle this functionality. 我也对其他屏幕阅读器如何处理这个功能感兴趣。

Your code is correct. 你的代码是正确的。 Apparently, the "1 behind" has been discovered . 显然,已经发现了“落后1”。 From the link, it looks as if using aria-atomic="true" may fix the problem. 从链接看起来好像使用aria-atomic="true"可以解决问题。 However, the example as given does work properly in IE9 and Firefox. 但是,给定的示例在IE9和Firefox 可以正常工作。

If you haven't stumbled across them already, check out the test-cases on codetalks and accessibleculture.org . 如果您还没有偶然发现它们,请查看codetalksaccessibleculture.org上的测试用例 There are a lot of subtle differences to be aware of. 需要注意很多微妙的差异。 Just don't be surprised when the tests fail! 测试失败时不要感到惊讶! Over the past year or so, I've come across a few (inadequate) tricks which may help you. 在过去一年左右的时间里,我遇到了一些可能对你有帮助的(不合适的)技巧。

Method 1: role="alert" 方法1: role="alert"

The alert role is supposed to be equivalent to aria-live="assertive" , but older versions of JAWS didn't handle it properly. alert角色应该等同于aria-live="assertive" ,但旧版本的JAWS没有正确处理它。 Check out these examples from February 2011, which states that: 查看2011年2月的这些示例 ,其中指出:

If you are looking to support JAWS 10 in IE7 or IE8 at all, it is likely best to double up on alerts with both role="alert" and aria-live="assertive". 如果您希望在IE7或IE8中支持JAWS 10,最好使用role =“alert”和aria-live =“assertive”来加倍警报。 While this is somewhat redundant since, by definition, the alert role is to be processed as an assertive live region, doing so does allow JAWS 10 to automatically announce the updated alert's contents in those two browsers. 虽然这有点多余,因为根据定义,警报角色将被处理为一个自信的实时区域,这样做可以让JAWS 10自动在这两个浏览器中公布更新的警报内容。

Both Firefox4+ and IE9 do not require this. Firefox4 +和IE9都不需要这个。 But it would be something like this: 但它会是这样的:

<div id="statusbar" role="alert" aria-live="assertive">
  Contents will be spoken when changed
</div>

Method 2: focus forcing hack 方法2:集中强迫黑客攻击

By dynamically creating a DOM element and forcing focus to it, you can "trick" most screen readers into reading the contents. 通过动态创建DOM元素并强制关注它,您可以“欺骗”大多数屏幕阅读器阅读内容。 It's hackish, but effective...and somewhat the point of the Create and Focus example. 它是hackish,但有效......而且有点是Create和Focus示例的重点 Simplified, you can do something like this: 简化,您可以这样做:

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

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

Merely hiding/showing the contents instead actually works fairly well most of the time. 仅隐藏/显示内容实际上在大多数情况下工作得相当好。 However, VoiceOver 's focus lingers on the element and does not speak its contents when shown again. 但是, VoiceOver的重点在于元素,并且在再次显示时不会说出其内容。 Thus, removing it from the DOM seems to be the most foolproof method for now. 因此,从DOM中删除它似乎是目前最简单的方法。 I don't like it, but such is the state of things. 我不喜欢它,但事情就是这样。

If you are using JAWS, i think you need also to configure the default mode; 如果您使用的是JAWS,我认为您还需要配置默认模式; because the screen reader have a "read only" mode. 因为屏幕阅读器具有“只读”模式。 this problem can be solved via press: 这个问题可以通过印刷机解决:

(Insert + z) to turn on/off the read-only screen readers. (Insert + z)打开/关闭只读屏幕阅读器。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM