Visually hidden snippet

There are several ways to hide content using CSS. For example using display: none, or visibility: hidden. Each way of hiding elements is useful in different situations, but this snippet is specifically for visually hiding elements while keeping the accessible to assistive technologies like screen readers.

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

Scott O'Hara wrote about this in 2017 including a deep dive into all the different ways you can hide stuff and when to use which method. I'd definitely recommend checking out that article too.