how to visually hide a text for people which are not screen reader
So in this video of kevin
https://www.youtube.com/watch?v=HbBMp6yUXO0&t=86s&pp=ygUiY3JlYXRpbmcgYSByZXNwb25zaXZlIG5hdmJhciBrZXZpbg%3D%3D
he created a button and added the text
menu
and a background-image to it and after doing this he added the sr-only
class due to which for normal people the text was hidden but we can still the background-image and text was still there for screen readers but in this video he didn't show the code he used in the sr-only
classKevin Powell
YouTube
Responsive navbar tutorial using HTML CSS & JS
You can find the Frontend Mentor project here: https://www.frontendmentor.io/challenges/space-tourism-multipage-website-gRWj1URZ3
And the free Scrimba course here: https://scrimba.com/learn/spacetravel
š Links
ā
Why I use HSL: https://youtu.be/Ab9pHqhsfcc
ā
More on feature queries (@supports): https://youtu.be/wPI8CEoheSk
ā
More info on .sr-...
6 Replies
check the video description there is a link to an article about that
try with this css code:
There's this great article and explanation out there from Josh Comeau who makes some amazing content as well. He has a whole react component which explains the logic and everything of it, but we can use the styles he provides to do it in any language.
The CSS he used is as follows:
Here's the link explaining everything just for reference, but that css will work.
https://www.joshwcomeau.com/snippets/react-components/visually-hidden/
VisuallyHidden
A convenient component for contextualizing visual content for screen readers
Very similar to this solution as well š
Just figured I'd provide a link for some context on why it works
So our codes are practically the same xd but the link with helpful explanation is always helpful
oh btw the
!important
is to ensure that it will use these propertiesHaha yes, concept is pretty much the same. I just like his explanations on the matter š