When we hide content, we’re usually hiding it both visually and from screen readers. However, although less occasional, there may be cases where you’ll want to only hide content visually but make it available to screen readers. This is usually in cases where information or meaning is apparent visually but may not be apparent to screen reader users.

An example of such a case could be: a button styled to look like a typical “close” button, with an X in the middle with a modal or dialog:

<button class=”close button”>X</button>

Visual users can understand that the button closes the dialog or modal. But to screen reader users, nothing is indicating that the purpose of the button is to close the dialog or modal.

Another example could be having colored div boxes which have letters or numbers within them, of which the colors are important for understanding, like so:

<div class=”red-box”>1</div>
<div class=”blue-box”>2</div>

A blind screen reader user would only hear the content of the red box but not the color.

The different ways to make content accessible to only screen readers.

1. The HTML Way

f you simply want to provide an additional textual description, that should only be visible to screen readers, the easiest way is with aria-label. The aria-label attribute is used to add off-screen descriptive text to an element, in the same way, that the alt attribute is used to add off-screen descriptive content to images.

So for the colored boxes, we could do:

<div aria-label=”Red box 1” class=”red-box”>1</div>

2. The CSS Way

The web accessibility in mind recommends two styles for visually hiding content that will be read by a screen reader.

The first one is:

.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

This can then be used like:

<div class="sr-only">This text is hidden.</div>

The second is:

.sr-only-clip{
 clip: rect(1px, 1px, 1px, 1px);
 clip-path: inset(50%);
 height: 1px;
 width: 1px;
 margin: -1px;
 overflow: hidden;
 padding: 0;
 position: absolute;
}

Blog Credits: Linda Ikechukwu