Kevin Powell - Community•2y ago

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•2y ago

check the video description there is a link to an article about that

Brightie•2y 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•2y 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•2y ago

Very similar to this solution as well 🙂 Just figured I'd provide a link for some context on why it works

Brightie•2y 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•2y ago

Haha yes, concept is pretty much the same. I just like his explanations on the matter 🙂

Gaming

Programming

how to visually hide a text for people which are not screen reader