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 class
Kevin 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
Mannix
Mannixā€¢16mo ago
check the video description there is a link to an article about that
Brightie
Brightieā€¢16mo ago
try with this css code:
.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
clip-path: inset(50%) !important;
height: 1px !important;
width: 1px !important;
position: absolute !important;
overflow: hidden !important;
white-space: nowrap !important;
padding: 0 !important;
margin: -1px !important;
}
.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
clip-path: inset(50%) !important;
height: 1px !important;
width: 1px !important;
position: absolute !important;
overflow: hidden !important;
white-space: nowrap !important;
padding: 0 !important;
margin: -1px !important;
}
croganm
croganmā€¢16mo ago
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:
.visually-hidden {
position: 'absolute',
overflow: 'hidden',
clip: 'rect(0 0 0 0)',
height: 1,
width: 1,
margin: -1,
padding: 0,
border: 0,
}
.visually-hidden {
position: 'absolute',
overflow: 'hidden',
clip: 'rect(0 0 0 0)',
height: 1,
width: 1,
margin: -1,
padding: 0,
border: 0,
}
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
croganm
croganmā€¢16mo ago
Very similar to this solution as well šŸ™‚ Just figured I'd provide a link for some context on why it works
Brightie
Brightieā€¢16mo ago
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 properties
croganm
croganmā€¢16mo ago
Haha yes, concept is pretty much the same. I just like his explanations on the matter šŸ™‚
Want results from more Discord servers?
Add your server