Visually Hidden

Serhii Shramko /

/* Visually hides an element while keeping it accessible to screen readers. */

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

Developers frequently employ display: none to conceal content on web pages.

However, this approach can pose accessibility challenges for users of screen readers, particularly when the hidden content was intended for their benefit.

If you need more info about common css classes, check out the post.