播报结束时切换aria-live吗？ [英] Toggle aria-live when announcement finishes?

问题描述

我目前正在研究一个交互式pdf阅读器项目，以使其更易于访问。我制作了一个< p> 元素，该元素在屏幕上不可见，并赋予了 aria-live 属性。每当我要宣布某事（例如打开抽屉）时，我都会设置该< p> 元素的文本。
但是，如果用户希望整个页面都成为公告，而语音提示的键是 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隐藏。

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或visible：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中删除或在显示或设置后不久将其空白，这样一来，经过页面浏览的scren读者就不会再找到它了。
但是，您还必须注意这一点。在某些情况下，我已经观察到，如果元素删除得太早（在仍在播报公告的同时），它会使屏幕阅读器立即删除该公告。
而且，您当然无法知道屏幕阅读器是否已完成阅读消息，当前是否正在阅读或是否尚未阅读。如果这样做，请花些时间让元素可见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屋！