Can you please tell me what this sr-only class does?

HTML-CSS
1

Tell us what’s happening:
I know sr-only is used for visually impaired people. I wanna know why those specific lines are doing, like- why we are using left: -10000px ? What does line do?

Your code so far


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

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css

2

The left property in this case is making the content go off-screen from a regular viewer. So when a screen reader is reading the screen, it will see this content and read it off to the user.

1 Like
3

Why .sr-only class:
It’s in a consideration of screen readers for accessibility purposes. Usage of the class will hide the element anyways, therefore you shouldn’t see a visual difference. You see, if you don’t include a label for every input the screen readers will have trouble with it. Don’t remove it even if it’s fine without it.

1 Like