Priority values used by screen reader
off
: the text will be read if user is currently focused on that region.polite
(default): the text will be read at the end of the current sentence or when the user pauses typing.assertive
: the text will be read immediately, causing an interruption.
Try it!
Below you will see the div added and removed for the screen reader
If you want to listen it, you need to run a screen reader.
You are not supposed to see it on your website because you need to use that css:
.sr-only {
border: 0;
clip: rect(0,0,0,0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}