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>



<p>Writing the sr-only class in CSS would look like this<br>
</p>

<pre class="brush:php;toolbar:false">.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">
   
   

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

   <div class="sr-only">
   
   
   <li><p><strong>Hiding Input Elements for Custom Radio Buttons</strong><br>
   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.</p></li>
   
   
   <h2>
     
     
     Hiding Elements from All Users
   </h2>
   
   <p>To completely hide an element from both sighted users and screen readers, you can use display: none or visibility: hidden.<br>
   </p>
   
   <pre class="brush:php;toolbar:false">.hidden {
     display: none;
     /* or visibility: hidden; */
   }
   

   Apply the class:
   

   <div>
   
   
   
   <h2>
     
     
     TL;DR
   </h2>
   
   <p>Here’s a table summarizing how various CSS attributes affect visibility for different types of users:</p>
   <div><table>
   <thead>
   <tr>
   <th><strong>CSS Attribute</strong></th>
   <th><strong>Hides for All Users</strong></th>
   <th><strong>Hides for Sighted Users</strong></th>
   <th><strong>Hides for Screen Readers</strong></th>
   <th><strong>Notes</strong></th>
   </tr>
   </thead>
   <tbody>
   <tr>
   <td>display: none</td>
   <td>✅</td>
   <td>✅</td>
   <td>✅</td>
   <td>Completely removes the element from the visual and accessibility tree.</td>
   </tr>
   <tr>
   <td>visibility: hidden</td>
   <td>✅</td>
   <td>✅</td>
   <td>✅</td>
   <td>Hides the element visually but keeps it in the layout and accessibility tree.</td>
   </tr>
   <tr>
   <td>opacity: 0</td>
   <td>❌</td>
   <td>✅</td>
   <td>❌</td>
   <td>Makes the element fully transparent but still visible to screen readers and interactive.</td>
   </tr>
   <tr>
   <td>clip: rect(0, 0, 0, 0)</td>
   <td>✅</td>
   <td>✅</td>
   <td>❌</td>
   <td>Commonly used in the "visually hidden" technique; removes visual rendering but accessible.</td>
   </tr>
   <tr>
   <td>position: absolute; width: 1px; height: 1px;</td>
   <td>✅</td>
   <td>✅</td>
   <td>❌</td>
   <td>Used with the "visually hidden" technique; keeps elements accessible to screen readers.</td>
   </tr>
   <tr>
   <td>aria-hidden="true"</td>
   <td>❌</td>
   <td>❌</td>
   <td>✅</td>
   <td>Removes the element from the accessibility tree but leaves it visually present.</td>
   </tr>
   <tr>
   <td>overflow: hidden</td>
   <td>❌</td>
   <td>✅ (if out of bounds)</td>
   <td>❌</td>
   <td>Hides content visually if it overflows the container but does not affect screen readers.</td>
   </tr>
   <tr>
   <td>height: 0; width: 0;</td>
   <td>✅</td>
   <td>✅</td>
   <td>❌</td>
   <td>Hides content visually while keeping it accessible to screen readers.</td>
   </tr>
   <tr>
   <td>z-index: -1</td>
   <td>❌</td>
   <td>✅</td>
   <td>❌</td>
   <td>Moves the element behind others, making it invisible to sighted users but screen reader-accessible.</td>
   </tr>
   <tr>
   <td>opacity: 0; pointer-events: none;</td>
   <td>✅</td>
   <td>✅</td>
   <td>❌</td>
   <td>Makes an element fully transparent and non-interactive, but accessible to screen readers.</td>
   </tr>
   </tbody>
   </table></div>
   
   
             </div>