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

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

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

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:

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

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