尽管div被隐藏,但宣布咏叹调实时文本更改

Question

我有一个带有图标的div和一个隐藏的消息,除非有人将鼠标悬停在它上面,点击时会执行操作.

对于有视力的用户,图标会在单击时切换为复选标记,并且当图标悬停时,消息会发生变化.但是,对于使用选项卡按钮的用户,不会显示该消息.

带有消息的div是一个咏叹调的区域,但由于它是隐藏的,因此屏幕阅读器不会宣布新消息.尽管该区域被隐藏了,有没有办法宣布这条消息？

Answer 1

最简洁的答案是不.如果您希望宣布其内容更改,则必须显示aria-live区域.

您可以在我给出一个小技巧的地方阅读这个问题:将元素显示几秒钟,足以让屏幕阅读器读取消息,然后再次隐藏.但是,您必须至少显示该消息3-5秒,因为如果您仍在说话时隐藏元素,则某些屏幕阅读器会在结束前剪切.

如果长时间显示该消息是不可接受的,您仍然可以通过使用下面的一点CSS将其放在屏幕外.请注意,许多框架已经具有类似.visually-hidden,.sr-only等类,具有类似的代码.如果您使用其中一个,请使用他们定义的内容.

.visually-hidden {
top:0;
left:-2px;
width:1px;
height:1px;
position:absolute;
overflow:hidden;
}

```