Make Elements Only Visible to a Screen Reader

HTML-CSS
1

Tell us what’s happening:
Hello!
I am doing the challenges related with accesibility, and I have a question:
Why do we have to put these values
position: absolute;
left: -10000px;
width: 1px;
height: 1px;?
To make it invisible for non screen-rider users? Why the 1px? (if the table is already somewhere off the screen)

Challenge: Make Elements Only Visible to a Screen Reader by Using Custom CSS

Link to the challenge:

2

It needs to have a height and width.

Zero values for pixel sizes, such as width: 0px; height: 0px; removes that element from the flow of your document, meaning screen readers will ignore it

1 Like