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

#beginners #webdev #frontend #tutorial

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.