Dhairya Shah
Dhairya Shah's Blog

Dhairya Shah's Blog

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

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

Dhairya Shah's photo
Dhairya Shah
·Aug 12, 2022·

1 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

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

I hope this article was worth reading. Please do consider a like and share it with your colleagues and friends.

Consider buying me a coffee

Let's connect

Thanks for reading!

 
Share this