Announce invisible alert-CodePudding

Is there a way to announce a Successful message using an alert/status role without showing anything visible on the screen for the user?

I tried creating an alert div dynamically but the user could see the success text displaying on the screen. I need it to just be announced and don't give any visual feedback to the user.

   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);

CodePudding user response：

You can hide it from the screen using CSS, with the off-screen technique.

If you are using bootstrap, there's a .sr_only class doing that. Otherwise, you can easily find the corresponding CSS code. Basically it looks something like this:

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

Don't use display:none, visibility:hidden or width/height:0, as those are also going to hide the message for screen readers, and as a consequence, the alert won't be spoken.

Note that you can't hide the message from the screen reader's display as known as virtual buffer. If you want to do so, the best you can do is removing the element from the DOM after a few seconds. You must wait long enough for the message to be spoken entirely, as with some screen readers, speech is cut when the element is removed.

CodePudding user response：

use css

.alert{
 display: none;
}

.alert{
 z-index: -100;
}