[英]aria-live=“polite” not reading roles of elements it is associated with
I have a site that needs to be made fully accessible.我有一个需要完全访问的网站。 We have dynamic content that sits on a single page (doesn't reload) and changes on the screen.
我们拥有位于单个页面上的动态内容(不会重新加载)并在屏幕上发生变化。
For the screen-reader to keep up with this, I've added some JS logic where the attribute aria-hidden="true"
or aria-live= "polite"
is added to hide and reveal the targeted elements.为了让屏幕阅读器跟上这一点,我添加了一些 JS 逻辑,其中添加了属性
aria-hidden="true"
或aria-live= "polite"
来隐藏和显示目标元素。
Although the element's aria-label
is read out, I run into an issue where the role
attribute is left out.虽然元素的
aria-label
被读出,但我遇到了role
属性被遗漏的问题。
Situation 1情况一
<div role="button" aria-label="This is a label" aria-hidden="true"></div>
I use JS to remove the attribute aria-hidden
and add aria-live="polite"
when this button needs to be read on the page我使用 JS 去除属性
aria-hidden
并在页面上需要读取此按钮时添加aria-live="polite"
Which makes the screen-reader then read "This is a label"这使得屏幕阅读器然后阅读“这是一个标签”
Situation 2情况2
<div role="button" aria-label="This is a label"></div>
However, if the content is read from the get-go without being hidden, ie no aria-hidden="true"
it reads as "This is a label, Button"但是,如果从一开始就读取内容而没有隐藏,即没有
aria-hidden="true"
,它会显示为“这是一个 label,按钮”
I want this behaviour, but with me able to control when this occurs.我想要这种行为,但我能够控制这种情况何时发生。
I'm using iOS screen reader on the latest Chrome.我在最新的 Chrome 上使用 iOS 屏幕阅读器。
I've tried quite a few hacks to get around this:我已经尝试了很多技巧来解决这个问题:
aria-hidden="true"
to parent and indivdual elements results in role still being omittedaria-hidden="true"
设置为父元素和单个元素会导致角色仍然被省略aria-live="polite"
to reveal but the opposite aria-hidden="false"
.aria-live="polite"
来显示,而是使用相反的aria-hidden="false"
。 This however won't even get picked up by the screen-readerAny help or guidance much appreciated.非常感谢任何帮助或指导。
Additional JSFiddle, with a simplified example (you can use Apple screenreader and click into the window to hear the content read):附加的 JSFiddle,带有一个简化的示例(您可以使用 Apple 屏幕阅读器并单击 window 以收听阅读内容):
https://jsfiddle.net/qf4jv6g9/2/ https://jsfiddle.net/qf4jv6g9/2/
All the comments are decent so far but are avoiding the problem.到目前为止,所有评论都不错,但都在避免这个问题。 Whether you use a real
<button>
or <div role="button">
doesn't matter.无论您使用真正的
<button>
还是<div role="button">
都无关紧要。 Using a <div>
is certainly a lot more work because you need tabindex
and event handlers and aria-label
and such, but if all that is there, it doesn't matter to assistive technology which one you use.使用
<div>
肯定需要更多的工作,因为您需要tabindex
和事件处理程序以及aria-label
等,但如果所有这些都存在,那么您使用哪种辅助技术并不重要。
Regarding aria-live
, it's not meant to be a dynamic property.关于
aria-live
,它并不是一个动态属性。 That is, it's not an attribute you want to add on the fly.也就是说,它不是您要即时添加的属性。 It works best when the page is loaded and the element already has
aria-live
set.当页面加载并且元素已经设置了
aria-live
时,它的效果最好。
The purpose of aria-live
is to announce changes to the element (or child elements if aria-live
is set on a container). aria-live
的目的是宣布对元素(或子元素,如果aria-live
设置在容器上)的更改。 So when the page is loaded and the right elements have aria-live, then anytime you add text to the element (or child element) or add/remove child elements or hide/unhide child elements, those changes will be announced.因此,当页面加载并且正确的元素具有 aria-live 时,无论何时您向元素(或子元素)添加文本或添加/删除子元素或隐藏/取消隐藏子元素,这些更改都会被宣布。 But only the text is announced.
但只公布了文本。 (See
aria-relevant
to control what types of changes are announced.) (请参阅
aria-relevant
以控制宣布哪些类型的更改。)
You can run into timing issues if you dynamically add an element with aria-live
and then add child elements to that new live region.如果您使用
aria-live
动态添加元素,然后将子元素添加到该新的活动区域,则可能会遇到时间问题。 Should the newly added children be announced right then or does the display/refresh cycle need to go through once before the "live-ness" takes affect?新添加的孩子是否应该立即宣布,或者显示/刷新周期是否需要 go 在“live-ness”生效之前完成一次? It's hard to say because browsers and operating systems combinations work a little differently.
很难说,因为浏览器和操作系统组合的工作方式略有不同。
What I have found is that aria-live works fantastic when I'm not dynamically adding that attribute.我发现,当我不动态添加该属性时,aria-live 的效果非常好。
Your fiddle example does not work at all with NVDA on a PC.您的小提琴示例根本不适用于 PC 上的 NVDA。 That is, nothing is announced when the new button is revealed, which is what I expect because you're unhiding a button and adding
aria-live
to it.也就是说,当显示新按钮时,不会宣布任何内容,这是我所期望的,因为您正在取消隐藏按钮并向其添加
aria-live
。 So I think the purpose of aria-live
is a little misunderstood.所以我认为
aria-live
的目的有点被误解了。 If you add a container around the hidden button and that container has aria-live
, then when the button is unhidden, it'll be announced.如果您在隐藏按钮周围添加一个容器并且该容器具有
aria-live
,那么当该按钮未隐藏时,它将被宣布。
I changed your fiddle to have:我把你的小提琴改成了:
<div aria-live="polite">
<button aria-hidden="true" class="newButton hidden" role="button">
New Content
</button>
</div>
and I changes the JS to remove the aria-live
line我更改了 JS 以删除
aria-live
行
activeButton.addEventListener('click',function testFunc() {
//newButton.setAttribute("aria-live","polite");
newButton.removeAttribute("aria-hidden");
newButton.classList.remove("hidden");
}
Now when I click on the "reveal" button, I hear "new content".现在,当我单击“显示”按钮时,我会听到“新内容”。 I don't hear "button" but that's ok.
我没有听到“按钮”,但没关系。
aria-live
is meant to announce text changes, not the role of elements. aria-live
旨在宣布文本更改,而不是元素的作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.