您无法阻止 aria-live 元素被阅读整个页面的屏幕阅读器读取。您可以在屏幕上以视觉方式隐藏它,但不能从虚拟缓冲区或屏幕阅读器的内部表示中隐藏它,以免它无法访问和读取。
要从屏幕上隐藏元素,请查看流行框架中的 .visually-hidden、.sr_only 等 CSS 类。这是向屏幕阅读器用户显示某些内容同时为普通屏幕用户隐藏它的常用方式。
要从屏幕阅读器表示中隐藏元素(但不一定是屏幕),您可以使用 aria-hidden。但随后 aria-live 也变得无法操作。
您可能还想使用 display:none 或 visibility:hidden 来隐藏屏幕阅读器和可视屏幕中的元素。其他同类技巧,如 font:0、width/height:0、opacity:0、clip:0 等也有同样的问题,它们不一定能有效地将元素隐藏在任何地方。但是,在这种情况下,行为不成立。ARia-live 将在某些屏幕阅读器 + 浏览器组合中正常运行,具体取决于所使用的确切技巧,而它会停止与其他人一起使用,尤其是 Safari Mac 和 iOS 上的 VoiceOver。
一个小技巧包括从 DOM 中删除元素,或者在它显示或设置后不久将其变为空白,这样浏览页面的屏幕阅读器之后就不会找到它。但是,您也必须小心这一点。我已经观察到在某些情况下,如果元素被过早删除(当公告仍在播放时),它会使屏幕阅读器立即切断公告。而且,当然,您无法知道屏幕阅读器是否已完成阅读消息、当前是否正在阅读或尚未阅读。如果您这样做,请花点时间让元素可见 5、10 或更多秒,以确保完整阅读消息。
因此,总而言之,您没有真正好的方法来保持您的 aria-live 元素工作,同时防止屏幕阅读器通过页面阅读的正常方式到达它。