问题标签 [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 - 如何停止 508 Jaws 咏叹调警报队列
我当前的代码库使用以下函数来创建警报以通知盲人用户发生了某些事情,例如“Bob 已成功分配给蓝队”。
大多数可重用组件会让盲人用户知道当前状态。我遇到了一些问题,例如,刷新一个表,读取页数,然后应用过滤器,页码发生变化,因为过滤列表中的项目数发生了变化。这会导致 Jaws 向盲人用户读取许多相互冲突的状态,因为它会读取整个警报队列。
我希望有一种方法可以防止它读取队列,例如:
但这也不起作用,它仍然读取整个消息队列。
accessibility - sr-only 在 Internet Explorer 中不起作用
我有一个活动区域,单击按钮会增加显示的计数值(类似于投票/喜欢)。屏幕阅读器要读出的消息是一个计算值,例如:“1 人喜欢这篇文章”/“没有人喜欢这篇文章”/“8 人喜欢这篇文章”。这些消息在客户端脚本(计数值)中计算并在服务器脚本(最终消息)中定义。
这在 chrome 中完美运行,但不能在 Windows 中使用 Jaws 屏幕阅读器读出 IE 中的消息。
javascript - Angular 可访问性 aria-live 不会在“0”值上发声
我愿意为视觉障碍制作一个 Angular 组件。该组件有两个按钮,用于在显示的值上添加或删除 10。除了值为“0%”时,显示的值可用于任何值。我想不通。
用于发声的软件:Windows 上最新的 NVDA。
Ps:这与 Angular afaik 无关,与 vanilla js 相同的示例也存在相同的问题。
谢谢
更新:Firefox 和 Edge:不工作,Chrome 和 IE:工作
accessibility - 您可以在网页上多次使用 aria-live 吗?
我正在创建一个在相关输入下方显示验证错误的 from。为了使表单更易于访问,我在 div 中添加了 aria-lives 来保存错误消息。拥有多个 aria-live 会不会让用户变得更糟?
safari - 带有 VoiceOver 的 Safari 从实时区域更新中删除消息
运行莫哈韦沙漠。我有一个网页,想向用户宣布一些事情。我发现当它发生时,VoiceOver 会卡住解释焦点在哪里,并且“忘记”宣布实时区域更新。
我们还注意到这不适用于 Mojave,但在 High Sierra 上效果更好。
关于为什么会这样的想法,或者我们可以做些什么来有效地使用实时区域而不会超时?
我们的解决方法是设置一个超时来更新可能没有任何干扰的实时区域,但这感觉很hacky并且没有遵循我学到的自信或礼貌的实时区域应该做的事情。
javascript - Vue.js - 将焦点转移到组件
我有一个表单片段包裹在一个被隐藏的组件中v-if
。当用户单击一个按钮时,它会切换布尔值,显示隐藏的组件,当这种情况发生时,我想将焦点转移到片段上的第一个表单输入。
我试过用aria-live
没用。我怀疑 SPA 的性质会干扰这些活动区域的注册(这意味着我的猜测是必须在呈现页面时注册它们,因为它们在注入 DOM 时似乎没有响应)。然而,我没有将答案追到一个兔子洞里,所以这是推测性的。所以我在目标输入中添加了一个类并尝试使用HTMLElement.focus()
document.querySelector('.focus')[0].focus();
这也没有奏效。有谁知道为什么我似乎无法专注于最近注入 DOM 并且当时在页面上可见的元素?
javascript - How should a dialog announce dynamic content to screen reader users?
I have a <dialog>
element which, when opened, requests some content from the server using AJAX. When the content returns (which of course can be any length of time depending on connection speed and amount of content) the new content is then dynamically appended to the dialog.
How can I make screen reader users aware that this content now exists and that they can move to it? Should focus be moved to the content once it is inserted?
I'm using the a11y-dialog library to open the dialog.
I have the container for the dialog
set up with aria-live="polite"
and add aria-busy="true"
once I start the AJAX request.
aria-busy
is then set to false
once the AJAX request returns and the content is added to the container.
This works to announce the content as soon as it arrives, however, it reads all text entered, which in some cases can be several paragraphs. My experience with the screen reader controls is limited, so I'm unsure if there is a way to interrupt this automatic reading process.
This is the HTML code for the dialog
. The AJAX container has the id #dialog-ajax-wrapper
.
I would expect the fact that content is loading to be announced in someway, which it currently isn't. Then once the content is inserted, it is announced but not read in its entirety.
This is further compounded because focus is transferred to the close button. Since there are no other focusable elements until the content is loaded, tabbing or trying to navigate produces no result which could lead the user to think nothing is available and leave the page.
Is this the right method or is there a better way?
javascript - 屏幕阅读器无法读取 Firefox 中的 Aria-Live
我遇到了一个问题,即屏幕阅读器没有读取在 FireFox 的 aria-live 部分中更改的文本。
这是一个简单的页面示例,在 chrome 中,屏幕阅读器会在更改进入时读取更改,而在 FireFox 中则不会:
难道我做错了什么?除了人们与 Firefox 一起使用的 aria-live 之外,还有其他方式来宣布更改吗?
我在 Mac-Firefox-VoiceOver 上进行了测试(它适用于 Mac-Chrome-VoiceOver)
angular - Aria-live vs Angular 材质直播播音器,兼容性和性能哪个更好
我正在开发一个缩略图组件,需要公布每个缩略图的内容。这里有两个选项 1) 使用 [attr.aria-live]="polite" 或使用 angular material a11y 模块。不确定是否有更好的性能和支持更多的浏览器。
基本上,选择缩略图时,请宣布其内容。
解决方案1:
解决方案2:
accessibility - aria-live 内容更新时阅读自定义消息
如果我有一个具有 aria-live='polite' 的元素,但我不希望屏幕阅读器读取更新的内容,而是我提供的自定义消息,这可能吗?
谢谢!