Hiding Elements in CSS: The Accessible Way

Hiding elements in your UI is common, but doing so in an accessible manner ensures you don’t unintentionally exclude some users. In this article, we’ll cover three scenarios:

1. Hiding elements from screen readers.
2. Showing elements to only screen readers.
3. Hiding elements from all users, including screen readers.

Each section includes code examples and practical use case

Hiding elements from screen readers

If you want an element to be visible to sighted users but hidden from screen readers, you can use the aria-hidden="true" attribute or CSS.

<div aria-hidden="true">This content is hidden from screen readers.</div>

Use cases

1. Hiding background images
2. Decorative icons or visual elements that don’t convey meaningful information.

<button>
  <span aria-hidden="true">+</span>
  Add Item
</button>

Showing elements to only screen readers

To make an element visible to screen readers but invisible to sighted users, you can use the "visually hidden" technique. Tailwind CSS provides a prebuilt utility class, sr-only, for this purpose.

<div class="sr-only">
  This content is only visible to screen readers.
</div>

Writing the sr-only class in CSS would look like this

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Use cases

1. For labeling interactive elements like inputs without visually displaying the text:
   

   <label for="username" class="sr-only">Username</label>
   <input type="text" id="username" name="username">
   

2. Providing additional information for screen reader users using aria-describedby
   

   <div class="sr-only" id="instructions">
     Password must include 8 characters, one number, and one special 
     symbol.
   </div>
   <input type="password" aria-describedby="instructions">
   

3. Hiding Input Elements for Custom Radio Buttons
   When creating custom radio buttons (or checkboxes), you often hide the native input element and replace it with a visually styled element. To do this accessibly, the hidden input must remain visible to screen readers.

Hiding Elements from All Users

To completely hide an element from both sighted users and screen readers, you can use display: none or visibility: hidden.

.hidden {
  display: none;
  /* or visibility: hidden; */
}

Apply the class:

<div class="hidden">This content is hidden from all users.</div>

TL;DR

Here’s a table summarizing how various CSS attributes affect visibility for different types of users: