Subscribe

A11Y 101: Hiding content

✍️

Hiding elements from the screen, but not the screen reader

28 May, 2022 · 2 min read

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;
}

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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

A11Y 101: Recap

11 Jun, 2022 · 2 min read

A11Y 101: Recap

A11Y 101: WAI-ARIA live

10 Jun, 2022 · 3 min read

A11Y 101: WAI-ARIA live

Join 2097 devs and subscribe to my newsletter