问题标签 [aria-live]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
2865 浏览

javascript - JAWS 不读取动态内容。IE11

我有一个搜索表格。当用户提交表单时,ajax 请求被发送到服务器。当响应到来时,我更新找到的项目计数值,但 JAWS 读取以前的项目计数值。为了让 JAWS 阅读新内容,我使用 aria 属性和 role="status"。但是 JAWS 仍然无法按预期工作。

我尝试过的: 让屏幕阅读器阅读使用 JavaScriptaria-live 和 JAWSARIA Live Regions等添加的新内容。

我究竟做错了什么?

HTML

JS

jsFiddle 要重现该问题,请尝试专注于搜索输入,键入一些文本并按下搜索按钮,同时 JAWS 处于打开状态。

0 投票
1 回答
2618 浏览

html - JAWS 不读取 Aria-Live="Assertive"

你好 Stackoverflow 社区。这是我的第一个问题,但我会尽量简洁和详细。

我的任务是更新我们的 ASP.NET Web 应用程序以符合第 508 节。这对我来说都是全新的,我无法让事情按预期工作。

我们有一个页面,用户可以在其中通过 onmouseover 事件获取有关链接的其他信息。显然,这不适用于视力不佳的用户。因此,我们为他们提供了一个“更多信息”按钮,该按钮显示与视力正常的用户相同的“工具提示”div。

我添加aria-live="assertive到“工具提示” div 的理解是,如果在页面加载时 div 被隐藏然后通过按钮显示,它将被 JAWS 读取。令我沮丧的是,事实并非如此。

工具提示 div 如下所示:

它通过带有以下 JavaScript 代码的按钮的单击事件显示:

显示工具提示 div 的按钮如下所示:

通过将 role="alert" 添加到工具提示 div,我成功让 JAWS 读取工具提示,但我想避免将警报角色用于非警报目的。主要是因为它显示“警告,这是我的工具提示文本”。给用户。

我想知道当工具提示变得可见时,让下巴阅读工具提示的正确方法是什么?

我正在使用 IE 11 和 JAWS 16。Internet Explorer 和 JAWS 是我无法更改的要求。

谢谢!-射线

更新

我想我会发布我们使用的解决方案,以防其他人遇到同样的问题。这是我们代码的简化版本,它显示了使工具提示可见并在显示时读取所需的内容。这是一个服务器控件,因此许多 ID 基于控件的 ClientID 属性并具有已知的后缀(_tootip、_tooltipcontainer 等)

JavaScript:

标记:

我希望这对将来的某人有用。当我想到它时,我可以轻松地放置一个 aria-live 区域,该区域在屏幕外某处保持可见,当工具提示“显示”时更改它的文本。所以有很多方法可以给这只特殊的猫剥皮。

0 投票
1 回答
2104 浏览

accessibility - Aria-live 更新后不说标签

我有这段用 JS 动态更新的 HTML。屏幕阅读器仅在更新时读出新值。它没有说明更新的输入的标签。

我尝试使用aria-labelledby, aria-describedby,但没有结果,只有输入的值,role="alert"aria-label不是他的标签。

从我对 Google 和 StackOverflow 的所有研究中,我没能找到正确的答案。

我在 Firefox 中使用 NVDA 作为屏幕阅读器。

谢谢您的帮助。

0 投票
2 回答
1352 浏览

html - 读取 aria-live 区域的标签

我有一个定义列表,其中一项可以更改:

我放aria-live了内容,因为它需要阅读到屏幕阅读器,它可以工作,但只读取数字。它需要说“动态数字:2”,以便用户有上下文。

我不能穿上aria-live<dl>因为那将是太多的内容阅读。我尝试在最后一对周围放置一个包装器 div dt/dd,但这是非法的 HTML。

我尝试使用aria-labelledby(如上所示),但这没有效果(在带有 VoiceOver 的 Chrome 中)。

如何让实时区域读取相关内容?

0 投票
1 回答
959 浏览

html - ios 上的可访问性 aria-live 阅读顺序更改

我正在尝试为动态页面添加可访问性,并且我有一个 div 来替换所有内容,并将其标记为对 aria-live 的礼貌。

当内容被替换时,一切都会按预期读取,但是当我替换内容时

ios VoiceOver 按 p1、p2、p3、table 的顺序读取,而不是 p1、p2、table、p3。

这只发生在 ios VoiceOver 上,使用 chrome 的 ChromeVox 按预期工作。

有谁知道如何更改ios中的阅读顺序?

0 投票
2 回答
10176 浏览

angularjs - 可访问性:使用 aria-live 的页面加载器指示器

问题:我遇到了一个正在努力解决的可访问性问题。我有一个角度网络应用程序。加载内容时会显示页面加载微调器/指示器。当页面内容加载后,微调器被隐藏。这个“div”永远不会从 DOM 中删除。

显示加载 div 时,不会读取加载 div 的内容(通过 NVDA 或钳口)。

我不想更改应用程序的结构,而是使用“aria 标签”来解决这个问题,只是想知道我是否需要做更多的事情来使 aria-live 工作?

更新(2016 年 7 月 27 日)

进一步澄清:我不是从 DOM 中删除内容,而是使用 css 显示/隐藏内容(显示:无显示:块,反之亦然)

0 投票
1 回答
790 浏览

jaws-screen-reader - 如何使 JAWS 可以读取错误消息

我在屏幕上有以下错误消息,但 JAWS 版本 15 屏幕阅读器无法读取。

我也试过 role='alert' 和 aria-atomic='true'properties 但它在 Chrome 和 IE 浏览器上仍然不可读。

0 投票
0 回答
641 浏览

angularjs - Angular JS 中动态页面标题的 Aria 和可访问性

谁能指导我如何在单页应用程序上实现可访问性?我的确切问题是关于宣布页面标题和新内容。

HTML

虽然页面标题正在动态更改,但屏幕阅读器无法识别更改。我已经将这两种情况都用于属性 aria-live="polite" 和 "assertive" ,这是没有用的。

以下是我提到的链接,

  1. http://www.creativebloq.com/web-design/make-single-page-apps-work-screen-readers-101517155
  2. http://simplyaccessible.com/article/spangular-accessibility/

感谢和问候

0 投票
1 回答
553 浏览

textarea - textarea 上的 aria-live 无法与 JAWS 一起使用

我正在使用 html textarea 来模拟命令提示符。在键入命令命令(例如 ipconfig)并按 Enter 键时,命令输出会附加到文本中。为了阅读输出,我在 textarea 中添加了 aria-live="polite" 属性,该属性与 NVDA 屏幕阅读器配合良好。但是,IE 上的 JAWS 每次输入命令时都会从顶部开始读取。如何让它像 NVDA 一样只读取新附加的文本?

到目前为止,我已经尝试了 aria-relevant="additions", role=log, role=alert 属性,但似乎没有任何效果。

0 投票
0 回答
538 浏览

html - 使屏幕阅读器仅读取重新加载所有表时更改的行

我有一个包含多行和多列的表。该表作为一个整体由 AJAX 偶尔重新加载。重新加载表时,我只想通知屏幕阅读器用户有关更改的数据。

更进一步,当任何单元格发生变化时,屏幕阅读器应该向用户读取整行。

此外 - 如果添加了新行,也应该将其作为一个整体读给用户。

应该添加哪些正确的 aria 属性以及在哪些标签上?

额外:还有一个专栏,我不想在寻找aria-live区的变化时被考虑。但是,如果行中的任何其他单元格发生更改,仍应读取此单元格。

下面是一个代码示例,我希望能够工作,但不是只读取更改,而是在每次重新加载表后读取整个表。