咏叹调和颚 [英] aria-live and JAWS
问题描述
我正在尝试使aria-live区域能够与JAWS 11和IE8正常工作。
I'm trying to get an aria-live region to work correctly with JAWS 11 and IE8.
使用下面的代码，我可以让JAWS宣布单击按钮时的新值，但是行为不是我期望的。
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.
<!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配置，每次单击按钮时都会听到：
Using my JAWS11/IE8 configuration, on each click of the button I hear:
Click number HTML Value (after click) JAWS says
------------ ------------------------- ---------
1 1 "Update button 0"
2 2 "1"
3 3 "2"
问题，我的问题是：我如何使JAWS宣布咏叹调的当前值-live区域，而不是aria-live区域的先前值？
我还对其他屏幕阅读器将如何处理此功能感兴趣。
I'd also be interested in how other screen readers will handle this functionality.
推荐答案
您的代码正确。显然， 。从该链接看，似乎使用 aria-atomic = true 可以解决此问题。但是，给出的示例 在IE9和Firefox中正常运行。
Your code is correct. Apparently, the "1 behind" has been discovered. From the link, it looks as if using aria-atomic="true" may fix the problem. However, the example as given does work properly in IE9 and Firefox.
如果您还没有偶然发现它们，请查看测试-在 codetalks 和 accessibleculture.org 。有很多细微的差异需要注意。如果测试失败，请不要感到惊讶！在过去的一年左右的时间里，我遇到了一些（不足的）技巧可能会为您提供帮助。
If you haven't stumbled across them already, check out the test-cases on codetalks and accessibleculture.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.
方法1： role = alert
Method 1: role="alert"
警报角色为假定为等效于 aria-live =断言 ，但旧版本的JAWS无法正确处理。请查看2011年2月以来的这些示例，其中指出：
The alert role is supposed to be equivalent to aria-live="assertive", but older versions of JAWS didn't handle it properly. Check out these examples from February 2011, which states that:
如果您希望完全支持IE7或IE8中的JAWS 10，则最好在警报上加倍同时具有role = alert和aria-live = assertive。尽管这有点多余，因为根据定义，警报角色将被视为断言的活动区域，但这样做确实允许JAWS 10在这两个浏览器中自动宣布更新的警报内容。
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". 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.
Firefox4 +和IE9均不需要。但这可能是这样的：
Both Firefox4+ and IE9 do not require this. But it would be something like this:
<div id="statusbar" role="alert" aria-live="assertive">
Contents will be spoken when changed
</div>
方法2：重点强迫黑客入侵
通过动态创建DOM元素并强制其聚焦，您可以欺骗大多数屏幕阅读器以读取其内容。它有点骇人听闻，但很有效……而且创建并集中示例。简化后，您可以执行以下操作：
By dynamically creating a DOM element and forcing focus to it, you can "trick" most screen readers into reading the contents. It's hackish, but effective...and somewhat the point of the Create and Focus example. Simplified, you can do something like this:
<div id="statusbar" role="alert"></div>
$('#statusbar')
.clear()
.append('<div tabindex="-1">' + newString + '</div>')
.children().first().focus()
;
仅隐藏/显示内容实际上在大多数情况下效果很好。但是， VoiceOver 的焦点停留在该元素上，并且在再次显示时不讲其内容。因此，从DOM中删除它似乎是目前最简单的方法。我不喜欢它，但是情况就是这样。
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. Thus, removing it from the DOM seems to be the most foolproof method for now. I don't like it, but such is the state of things.
这篇关于咏叹调和颚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
