How to Visually Hide Elements Using CSS Clipping So That Screen Readers Can Still Read It

What is CSS Clipping?

Simply put, CSS clipping allows you to hide parts of an element. You can define a rectangle that acts as a mask. Anything outside that mask get clipped or hidden.

The clip property lets you specify the coordinates of the clipping rectangle. The coordinates are relative to the element's top-left corner. For example:

clip: rect(10px 20px 30px 40px);

This hides everything except a rectangle with a top edge 10px down, a right edge 20px across, a bottom edge 30px down, and a left edge 40px across.
To hide the entire element, set clip: rect(0 0 0 0) This creates a zero-size rectangle that hides everything.

Why Hide Elements?

There are times you may want to hide something visually but keep it for screen readers.
For example:

• Provide text alternative for images, icons, or unclear buttons.
• Give extra instructions for screen reader users

CSS clipping hides content from sighted users but leaves it available for assistive technologies
Example
Here is HTML and CSS to visually hide an element

<div class="user-offline">
  John <span class="visually-hidden">(offline)</span>
</div>
<div class="user-online">
  Kyle <span class="visually-hidden">(online)</span>
</div>

.visually-hidden {
  position: absolute; 
  clip: rect(0 0 0 0);
  width: 1px; 
  height: 1px;
  overflow: hidden;
}

The visually-hidden class applies the clipping and other CSS to hide the element.

• position: absolute removes it from document flow
• clip: rect(0 0 0 0) hides the entire element
• width: 1px; height: 1px makes it take up minimal space
• overflow: hidden hides any overflowing content Screen readers can still read the hidden text.

Summary

• Use CSS clipping to hide elements visually but keep them for screen readers
• Set clip: rect(0 0 0 0) to hide the entire element
• Combine with other properties like position and overflow
• Useful for providing text alternatives or extra instructions

I hope this simple guide helps explain CSS clipping to visually hiding an element. Let me know, if you're still confused or have any other queries.