aria-live 和 JAWS

发布于 2024-11-27 13:52:24 字数 926 浏览 1 评论 0原文

我正在尝试让 aria-live 区域与 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"

问题，我的问题是：< strong>如何让 JAWS 宣布 aria-live 区域的当前值，而不是 aria-live 区域的先前值？

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

原文

I'm trying to get an aria-live region to work correctly with JAWS 11 and 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.

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>

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"

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?

I'd also be interested in how other screen readers will handle this functionality.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

贪恋 2024-12-04 13:52:24

你的代码是正确的。显然，“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 元素并强制将焦点放在它上，您可以“欺骗”大多数屏幕阅读器来阅读内容。它很黑客，但很有效......并且在某种程度上是创建和聚焦示例。简单来说，您可以执行以下操作：

<div id="statusbar" role="alert"></div>

$('#statusbar')
  .clear()
  .append('<div tabindex="-1">' + newString + '</div>')
  .children().first().focus()
;

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

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.

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.

Method 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. Check out these examples from February 2011, which states that:

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.

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>

Method 2: focus forcing hack

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()
;

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.

回复收藏 0 原文