公告结束时切换 aria-live? [英] Toggle aria-live when announcement finishes?

问题描述

我目前正在开发一个交互式 pdf 阅读器项目，以使其更易于访问.我制作了一个在屏幕上不可见的 <p> 元素，并为其赋予了 aria-live 属性.每当我想宣布某事时，比如打开一个抽屉，我都会设置那个 <p> 元素的文本.但是，如果用户希望整个页面都是公告，Voice Over 的键是 VO + a，那么 <p> 元素也会被读取，但是我想防止这种情况发生.

I'm currently working on a interactive pdf reader project to make it more accessible. I made a <p> element that's invisible on the screen and gave it the aria-live attribute. Whenever I want to announce something, like opening a drawer, I set the text of that <p> element. However, if the user wants the whole page to be announcement, which the key for Voice Over is VO + a, the <p> element is also read, but I would like to prevent that from happening.

有人可以建议这是否是宣布更改的正确方式吗?如果是这样，如果用户想要读取整个页面，我怎么能防止读取 <p> 元素?我目前正在使用 <p> 元素来宣布抽屉是否打开/关闭，或者字体/页码等是否发生变化.

Can someone suggest if this is the proper way to announce changes? If it is then how could I prevent <p> element from being read if user wants the whole page to be read? I'm currently using the <p> element to announce if a drawer is opened/closed, or if there's a change to the font/page number etc.

推荐答案

您无法阻止 aria-live 元素被屏幕阅读器读取整个页面.您可以在屏幕上以视觉方式隐藏它，但不能从虚拟缓冲区或屏幕阅读器的内部表示中隐藏它，以免它无法访问和读取.

You cannot prevent an aria-live element from being read by a screen reader reading through the whole page. You can hide it visually from the screen, but not hide it from the virtual buffer or internal representation of the screen reader so that it wouldn't be reachable and readable.

要从屏幕上隐藏元素，请查看流行框架中的 CSS 类，如 .visually-hidden、.sr_only 等.这是向屏幕阅读器用户显示某些内容而对普通屏幕用户隐藏的常用方式.

To hide the element from the screen, look at CSS classes like .visually-hidden, .sr_only, etc. present in popular frameworks. This is a common way of showing something to screen reader users while hiding it for regular screen users.

要从屏幕阅读器表示中隐藏元素(但不一定是屏幕)，您可以使用 aria-hidden.但随后 aria-live 也变得无法操作.

To hide the element from screen reader representation (but not necessarily the screen), you can use aria-hidden. But then aria-live become inoperant as well.

您可能还想使用 display:none 或 visibility:hidden 来隐藏屏幕阅读器和可视屏幕中的元素.其他同类技巧，如 font:0、width/height:0、opacity:0、clip:0 等也有同样的问题，它们不一定能有效地将元素隐藏在任何地方.但是，在这种情况下，行为不成立.ARia-live 将在某些屏幕阅读器 + 浏览器组合中正常运行，具体取决于所使用的确切技巧，而它会停止与其他设备一起使用，尤其是 Safari Mac 和 iOS 上的 VoiceOver.

You may also think to use display:none or visibility:hidden to hide the element from both the scren reader and the visual screen. Other tricks of the same kind like font:0, width/height:0, opacity:0, clip:0, etc. have the same problem and they don't necessarily effectively hide the element everywhere. In that case though, the behavior isn't consist. ARia-live will stay operant as normal in Some screen readers + browser combinations depending on the exact trick used, while it will stop working with others, most notably VoiceOver on Safari Mac and iOS.

一个小技巧包括从 DOM 中删除元素或在显示或设置后不久将其变为空白，这样浏览页面的屏幕阅读器之后就不会找到它.但是，您也必须小心这一点.我已经观察到在某些情况下，如果元素被过早删除(当公告仍在播放时)，它会使屏幕阅读器立即切断公告.而且，当然，您无法知道屏幕阅读器是否已完成阅读消息、当前是否正在阅读或尚未阅读.如果您这样做，请花点时间让元素可见 5、10 或更多秒，以确保完整阅读消息.

A small trick consists of removing the element from the DOM or making it blank a short while after it has been shown or set, so that a scren reader going through the page wouldn't find it afterwards. However, you must also be careful with this. I have already observed in certain cases that it makes the screen reader to immediately cut of the announcement if the element was deleted too early (while the announcement was still being spoken). And, of course, you have no way of knowing if the screen reader already finished to read a message, if it is currently reading it, or if it hasn't yet read it. If you do this, take your time and leave the element visible 5, 10 or more seconds to make sure the message is read entirely.

因此，总而言之，您没有真正好的方法来保持 aria-live 元素正常工作，同时防止屏幕阅读器以正常方式阅读页面.

So, in conclusion, you have no real good way to keep your aria-live element working while preventing it from being reached by screen readers' normal ways of reading through a page.

这篇关于公告结束时切换 aria-live?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！