问题标签 [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.
javascript - 我正在使用 aria-live 来宣布一个字符串。如何确保在任何其他事件公告之前立即宣布该字符串？
我正在使用 aria-live 来宣布字符串。如何确保在宣布其他任何内容之前立即宣布该字符串？问题的第二部分是“aria-live 仅在文本更改时宣布”。如何重复宣布相同的字符串？
google-chrome - 进行任何更改时，Chrome 会将整个元素发送到屏幕阅读器
在最近的某个时间点（我相信在 v80 更新期间）Chrome 已经开始在添加内容时将 aria-live 元素的全部内容发送到屏幕阅读器。在此之前，它曾经只宣布添加内容。Firefox 仍然像它应该的那样工作，只是宣布添加到这个元素。我正在使用 NVDA 进行测试，但我的用户也报告了与 JAWS 相同的行为。这是一些简单的代码来说明行为（您需要打开屏幕阅读器才能在此处获得想法）。
这以前在所有主要浏览器中都有效，只有屏幕阅读报告更改，但我的用户本周报告了这个问题。更改 aria-atomic 和 aria-relevant 属性的值没有任何作用。就好像 Chrome 不再尊重这些属性，当它分别默认为 false/additions 时。我没有机会在 Edge 或 Safari 中进行测试，我的大多数用户都在使用 Chrome。关于如何解决这个问题的任何想法？我在版本 80 的最新补丁说明中没有找到与此相关的任何内容。
javascript - 重新宣布一个即使文本相同，在 aria-live 下
我正在实现一个搜索框。其中一种情况是必须公布结果的总数。为了实现这一点，我将<p>标签放在一个aria-live区域内，并按预期宣布它。
预期场景：
用户键入一个字符串 --> 点击回车 --> 结果出现并宣布字符串。
边缘情况是如果用户按两次回车。
如果用户在没有任何更改的情况下再次按 Enter 键，则不会更新任何内容，因为计数仍然相同并且不会宣布任何内容。
我尝试在输入点击时使用它：
但是，它仍然没有宣布。
还有另一种方法可以做到这一点吗？
angular - 屏幕阅读器可以以角度形式访问的表单错误
基本上我希望公布内联表单错误。我有以下 Angular 7 的形式
当用户输入无效的电子邮件地址时，不会以某种方式宣布模式内联错误。用户键入时，此错误会显示在 UI 中。我希望屏幕阅读器宣布此错误。我也试过aria-live="assertive"但它似乎不适用于模式跨度。我正在使用chromevox 屏幕阅读器。
html - aria-live（礼貌）在 Safari 中的表格标题上不起作用是否正常？
如果我将aria-live属性放在这样的表格标题中：
然后在 Safari (14.0.3) 中更新字幕的textContentVoiceOver (macOS) 不会读取字幕。它适用于 Chrome 中的 VoiceOver。我还尝试在这个主题中加入一个span和caption许多变体（移动aria-live属性、更新innerHTML等）。但是当更改在 . 中时caption，Safari 将不会读取更改。
有谁知道如何使它起作用？
这是一个演示问题的小提琴： https ://jsfiddle.net/06phkrL8/
html - 即使应用了 lang="nl"，VoiceOver 也会以系统语言 (en) 读取 aria-live 的内容。如何改变？
我的页面上有一个实时区域。整个页面都是荷兰语（应用lang="nl"了 on <html>），对于大多数文本，一切正常。但是，如果我使用带有 的实时区域aria-live，则文本会以系统语言宣布，即使我lang="nl"使用实时区域本身也是如此。
这是 VoiceOver 中的错误吗？还是我做错了什么？
我做了一个codepen来演示：https ://codepen.io/petergoes/pen/LYbagMw
编码：
accessibility - Firefox 正在读取实时区域，但 chrome 和边缘浏览器未读取
屏幕阅读器 NVDA 和 JAWS 无法在 edge 和 chrome 中读取 aria-live=polite 和 role=status 但它在 Firefox 中工作。有没有办法修复它，以便它也可以在边缘工作。尝试使用 document.getElementById 聚焦("MessageBar").focus(); 但这也行不通。
html - 防止 Screenreader 读取 aria-live 容器中某些区域的更改
我有一个索引页面，用户可以在其中过滤结果，这些结果的外部容器有一个aria-live属性，以便读取该容器中的更改（希望这从一开始就没有错）。到目前为止，一切都很好。
问题是：目前这些容器有一个div.button-bar通过 CSS 显示在mouseover.
一个简化的示例如下所示：
button-bar对于键盘支持，我们更改了当前行为并添加了一个 JS 事件，当文章中的某些内容被聚焦时，该事件将通过添加一个类来显示。但是屏幕阅读器会立即读取这些按钮（由于aria-live）而不是标题和图标。我不确定setTimeout在我的 JS 中包含 a 是否能正确解决问题。是否有一个属性可以让屏幕阅读器忽略我的变化，button-bar但仍然阅读焦点上的那些按钮？
reactjs - 触发具有 React 状态的 aria-live 区域
下面的反应示例仅展示了带有 VoiceOver 的 Firefox 上的意外行为。
使用aria-live此标签上的属性p，我希望我的屏幕阅读器在文本更新时能够阅读我的文本。但是，我的屏幕阅读器没有阅读我更新的文本。我使用的屏幕阅读器是 macbook 上的 VoiceOver。
我用 html 和 vanilla JS 创建了同一个小应用程序，它按预期工作。代码和codepen链接如下...
如果您使用的是 Mac 并且以前从未这样做过，请按住 command 并按 touchID 3 次以启动 VoiceOver。
这是我的反应代码...链接到 codepen
...这是我预期的 html/vanilla JS 代码...链接到 codepen
vue.js - Changes in aria-live area not read properly on client-side search results in Vue 2
I am building a simple client-side text search on a list of items, where I want the screenreader to read how many items are found. For example if your search return two items, I want the screenreader to announce: "Two results found". To test this I am using VoiceOver.
The issue I am facing is that the announcement of this message is almost always interrupted by the screenreader reading the text your are typing in the element, causing the user to (partially) miss the message.
This is the markup for the aria-live area:
I have tried implementing this with a aria-role=status, which gave me the same results. I have also implemented the same thing with a debounce on the input. That only makes the issue less severe, because the screenreader has a little bit more time to finish reading the text that's typed.
So how do I implement this in a way that the message is always announced completely?
See this codepen for a full code example: https://codepen.io/chrisdh/pen/BaZyXYz