aria-live被其他标签打断了，如何停止这种行为? [英] aria-live is interrupted by other labels, how to stop this behavior?
问题描述
我目前有这个aria-live = assertive的div:
I currently have this div with aria-live=assertive:
<div id="accesibility__ready" aria-live="assertive" aria-atomic="true"></div>
当前，在我的js文件中，我有一种方法来设置页面中所有内容的标签，其中首先使用tabindex(第一个标题)，然后使用<p>.完成此方法后，我想通过aria live通知用户，现在他可以使用以下标签导航:
Currently in my js file I have a method for setting everything in page with a tabindex (first headlines) then the <p>'s. Once this method is finished I want to notify user through my aria live that he can now navigate with tab:
var ariaAlert = document.getElementById('accesibility__ready');
ariaAlert.setAttribute('aria-label','Content updated tab navigation ready');
我注意到有时读取aria-live，但是随后它会被所有其他标签(不是aria-live)打断，屏幕阅读器决定以某种方式读取.
I have noticed that sometimes the aria-live is read but then it gets interrupted by all the other labels (that are not aria-live), that somehow the screenreader decides to read.
我正在使用Chrome和ChromeVox扩展程序.
I'm using Chrome and ChromeVox extension.
那么我如何阻止aria-live被其他一些标签打断?
So How do I stop aria-live from being interrupted by some other labels?
推荐答案
听起来不是正确使用了aria-live.如果该元素的内容/子元素将更改，则打算在该元素上使用aria-live.这包括添加/删除/更改元素本身上的文本(例如textContent)或添加/删除嵌套在元素下的DOM元素.有关详细信息，请参见aria-live 上的 W3规范.
It doesn't sound like aria-live is being used correctly. aria-live is intended to be used on an element if the contents/children of that element will change. This includes adding/removing/changing text on the element itself (such as textContent) or adding/removing DOM elements nested under the element. See the W3 spec on aria-live for full details.
aira-live 不用于表示元素的属性何时更改.也就是说，在<div>上使用aria-live然后更改div的aria-label将不宣布.
aira-live is not used to indicate when an attribute of the element has changed. That is, using aria-live on a <div> and then changing that div's aria-label will not be announced.
aria-atomic控制更改发生时读取的数量.应该只读取更改的特定内容(aria-atomic="false"-默认值)还是读取整个元素(aria-atomic="true").
aria-atomic controls how much is read when a change happens. Should only the specific thing that changed be read (aria-atomic="false" - the default) or should the entire element be read (aria-atomic="true").
例如，
<div aria-live="polite">
this message will self destruct in
<span id="counter">X</span>
seconds
</div>
未指定aria-atomic(因此使用false的默认值)，如果将counter更新为"5"，则仅将宣布计数器的值， "5".但是，如果在<div>
Without aria-atomic specified (and thus the default value of false is used), if you update counter to '5', then only the value of counter will be announced, "5". However, if you use aria-atomic="true" on the <div>
<div aria-live="polite" aria-atomic="true">
this message will self destruct in
<span id="counter">X</span>
seconds
</div>
然后，当您将counter更改为"5"时，您会听到此消息将在5秒钟内自毁".
then when you change counter to '5', you'll hear "this message will self destruct in 5 seconds".
作为一些旁注.除非您有一条非常重要的消息需要中断正在读取的其他内容，否则您应该始终尝试使用aria-live="polite".很少有必须使用aria-live="assertive"的情况.使用assertive可能还会清除其他待读取的消息.
As a few side notes. You should always try to use aria-live="polite" unless you have a message that is super important that needs to interrupt whatever else is being read. Rarely are there cases where aria-live="assertive" have to be used. Using assertive might also clear other messages that are pending to be read.
用户代理或辅助技术 MAY 选择在发生肯定性更改时清除排队的更改"
"User agents or assistive technologies MAY choose to clear queued changes when an assertive change occurs"
最后，问题的整个前提听起来像是您可以选择使所有标题和段落都可选项(tabindex ="0").我不知道该选项的目的，您可能有这样做的正当理由，但是如果目的是帮助"您，则可以使用该选项.屏幕阅读器用户导航到页面上的所有元素，那么您将使屏幕阅读器用户遭受损害.屏幕阅读器用户已经在屏幕阅读器本身中内置了强大的导航机制.例如，在PC上，JAWS或NVDA用户可以使用"H"快捷导航键导航到所有标题.或者他们可以显示一个显示所有标题的对话框.他们可以使用类似的快捷键导航至其他各种元素("B"移至下一个按钮，"T"移至下一个表，"R"或"D"移至下一个地标，"L"移至下一个地标).移至下一个列表，依此类推). iOS上的VoiceOver具有旋转器，该旋转器允许对标题，按钮，表格等进行类似类型的导航.因此，只要您的页面使用语义正确的html(例如<h2>作为标题，而不仅仅是使字体变大的样式)粗体)，那么应该没有任何功能使所有内容都可以聚焦.
And finally, the whole premise to your question sounds like you have an option that makes all headings and paragraphs tabbable (tabindex="0"). I don't know the purpose of that option, and you might have a legitimate reason for doing so, but if the purpose is to "help" screen reader users navigate to all the elements on your page, you'd be doing the screen reader user a disservice. Screen reader users already have great navigation mechanisms built into the screen reader itself. For example, on a PC, a JAWS or NVDA user can navigate to all the headings by using the 'H' quicknav key. Or they can display a dialog that shows all the headings. They can navigate to various other elements with similar shortcut keys ('B' to move to the next button, 'T' to move to the next table, 'R' or 'D' to move to the next landmark, 'L' to move to the next list, etc). VoiceOver on iOS has the rotor which allows a similar type navigation to headings, buttons, tables, etc. So as long as your page uses semantically correct html (such as <h2> for a heading instead of just a style to make the font larger and bold), then you should be ok without a feature to make everything focusable.
这篇关于aria-live被其他标签打断了，如何停止这种行为?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
