In web development, we do run into a situation where we want to hide an element from the user’s view, but at the same time, we also want it to be accessible to Screen Readers.
In these situations, there’s a CSS approach that comes in very handy.
A bunch of CSS lines make sure that the content is nowhere visible to the average user, but is readable by the screen readers. This helps the disabled or users using a screen reader to read through that element and understand.
Syntax: As a best practice you can create a CSS class and add it to your HTML wherever you want it to be screen-reader friendly.
<label class="sr-only">Form Label</label>.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}