Hi there.

We are all familiar with the bootstrap sr-only class.

The name expands to screen readers only.

According to the documentation of Bootstrap, the information which is meant only for the screen readers can be hidden from the layout of the page using the class sr-only.

Sr-only class is necessary to include.  Excluding it may cause trouble.

Viewing forms will become a problem for screen readers if we do not include a label for every input. Although labels can be hidden using the .sr-only class but only for the inline forms.

Here is the default styling used:

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

The layout works fine without sr-only, so many users think of skipping it. But don’t.

It is important even though it’s presence doesn’t really shows any effect.

Considering screen readers is always important for accessibility purposes. With usage of this  class, you wouldn't really see a visual difference.

It will simply hide the skip link. Although this approach is fine only for screenreader users, and not for keyboard-only users.

Keep Coding.