Visually hidden with CSS

Various CSS frameworks use a technique to hide text visually but still allow it to be accessible to a screen-reader. It usually has a class called '.visually-hidden' or '.sr-only' and has CSS like this:

.visually-hidden:not(:focus):not(:active) {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

Want to know more? Read a detailed guide to CSS behind this class The anatomy of visually-hidden