How to hide content from the screen and not from screen readers

As a developer, we tend to hide things using display: none and visibility: hidden.

This works perfectly fine actually to hide elements from the screen. But, it also hides the things on the screen which also includes a screen reader.

Let’s see what it takes to hide elements from the screen and not screen readers.

The A11Y Project has made available a useful CSS for hiding content from 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;
}

Provide a name for the class visually-hidden to the element you want to hide from the screen but not from screen readers.

Thank you for reading

Follow me on Twitter

Liked my content? Buy me a coffee to fuel my work. Thanks for reading!