我有一个带有图标和消息的 div，除非有人将鼠标悬停在它上面，否则它会隐藏，单击时会执行操作。
对于有视力的用户，单击该图标时会切换为复选标记，将鼠标悬停在该图标上时会更改消息。但是，对于使用选项卡按钮的用户，不会显示该消息。
带有消息的 div 是一个 aria-live 区域，但由于它是隐藏的，屏幕阅读器不会宣布新消息。有没有办法在隐藏区域的情况下宣布消息？
最佳答案
简短的回答是否定的。如果您希望宣布其内容更改，则 aria-live 区域必须可见。
您可以阅读 this question我在这里给出了一个小技巧:显示元素几秒钟，足够长的时间让屏幕阅读器阅读消息，然后再次隐藏。 但是，您必须至少显示该消息 3-5 秒，因为如果您在该元素仍在朗读时隐藏该元素，一些屏幕阅读器会在结束前截断。
如果显示这么长时间的消息是 Not Acceptable ，您仍然可以通过使用像下面这样的小 CSS 将其放在屏幕外。 请注意，许多框架已经具有类似代码的类，如 .visually-hidden、.sr-only 等。如果您使用其中之一，请使用它们定义的内容。
.visually-hidden {
top:0;
left:-2px;
width:1px;
height:1px;
position:absolute;
overflow:hidden;
}
```
关于html - 尽管 div 被隐藏，但宣布 aria-live 文本更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50747587/