1

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

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

4

2 回答 2

2

您无法阻止 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 元素工作,同时防止屏幕阅读器通过页面阅读的正常方式到达它。

于 2018-05-28T19:14:54.320 回答
1

正如@quentinc 已经解释了视觉隐藏元素和屏幕阅读器隐藏元素之间的区别,您不能让屏幕阅读器可以使用元素,但要阻止它使用“全部阅读”命令。

在许多情况下使用aria-live非常方便,但如果没有关于您的具体情况的更多详细信息,很难提出替代建议。但是,既然你确实提到了“抽屉打开”,对我来说这听起来像是可以展开/折叠的东西。如果是这样,那么你应该检查一下aria-expanded。您可以将该属性的值从false更改true为向屏幕阅读器指示某些内容已扩展。抽屉开口将被视为扩大。屏幕阅读器将负责宣布更改,因此您不需要aria-live.

于 2018-05-28T21:24:43.050 回答