DEV Community

Cover image for A11Y 101: Hiding content
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

A11Y 101: Hiding content

We developers tend to hide elements by using display: none or visibility: hidden.

And this works perfectly fine actually to hide elements from the screen.
However, be aware this does precisely what we tell it. It hides things from the screen, which includes screen readers!

Hiding from screens, but not screen readers

Let's see what it takes to hide elements from the screen, but not screen readers.

An example of this is: hiding the label for the search field.

We have to be careful about which CSS we want to use to achieve this behavior.

I love to use the CSS provided by the A11Y project as it's super complete and up to date.

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

If you add this class to any element, It will be removed from the screen but announced by screen readers.

Conclusion

We have to be careful when we hide elements from the screen. Screen readers might not be able to read the information anymore if we entirely hide the element.

Using the provided CSS code, we can achieve the effect we want.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Discussion (2)

Collapse
liunate profile image
Nate Liu

Tks for the post. As there are some aria-xxx attributes available, is there some example we need to rely on this trick to make screen reader reads out something useful?

Collapse
dailydevtips1 profile image
Chris Bongers Author

If you use this trick you don't need the aria attributes.
It's only hidden visually so screen readers will neatly read it.