宣布隐形警报

Question

是否有一种方法可以使用警报/状态角色宣布成功的消息，而不显示屏幕上为用户显示的任何内容？

我尝试动态创建一个警报div，但是用户可以看到屏幕上显示的成功文本。我需要它只是公布，不要给用户任何视觉反馈。

   var newAlert = document.createElement("div");
   newAlert.setAttribute("role", "alert");
   newAlert.setAttribute("id", "alert");
   var msg = document.createTextNode('You have Successfully updated your phone number');
   newAlert.appendChild(msg);
   document.body.appendChild(newAlert);

Answer 1

您可以使用CSS将其隐藏在屏幕上，并使用离屏技术。

如果您使用的是引导程序，那么就会有一个.sr_only类执行此操作。否则，您可以很容易地找到相应的CSS代码。基本上看起来是这样的：

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

不要使用display:none，可见性:隐藏或宽度/高度:0，因为这些也会隐藏屏幕阅读器的消息，因此不会发出警报。

请注意，您不能将消息隐藏在屏幕读取器的显示(称为虚拟缓冲区)中。如果要这样做，最好的方法是几秒钟后从DOM中删除元素。您必须等待足够长的时间才能完全说出消息，就像某些屏幕阅读器一样，当元素被移除时，会剪切语音。

Answer 2

使用css

.alert{
 display: none;
}

或

.alert{
 z-index: -100;
}