hey guys
I was completing applied accessibility challenges and there is one that says how to make sth only visible to screen readers
but i don’t get what situation would you use this element in!
anyone care to demonstrate? 
Can you link to the challenge? Not sure how overflow: hidden is related to this unless the element that is pushed off screen is causing an overflow I guess.
You can have elements on a page that is not important or wanted in the visual design but are still needed for screen readers.
This is the type of question I think @bbsmooth would wish to take a swing at
I believe you are referring to this challenge?
One place this is often used is with buttons that use icons to represent their functionality. For example, you might have a ‘close’ button that uses an “X” icon. This is a pretty standard icon for this button and almost all sighted users will understand what it does just by looking at it, but someone who is listening to the page needs to hear the word “close” associated with that button since they can’t see the icon. You can add the text “close” inside the button element and visually hide it with CSS:
<button><span class="visually-hidden">close</span></button>
The visually-hidden class uses CSS to move the text off the screen (see the CSS example in the challenge) so it is not seen by the user but the screen reader will still “see” it and announce it to the user.
You can also use this technique to add extra helper content for screen reader users that you don’t want to show on the page. It might be additional headings (headings are very important for screen reader users) or it could be a simple sentence with some additional instructions/information for screen reader users. You don’t want to go crazy with this though, most of the time any information that is needed by a screen reader user is probably needed by a sighted user too, so you don’t want to start plastering visually hidden text all over the place.
I would say that the table example in the challenge might not be a good use of hiding elements for screen reader users only. First, some sighted people might have issues reading the bar chart and thus having access to the content in a table would be easier for them, so I’m not sure you would want to hide this in the first place. If you really didn’t want the table to display on the page then you could make it a separate page (or modal pop-up) and have a link to it in the caption. But there is nothing wrong with having both the bar chart and table showing at the same time.
There are a lot of other scenarios in which visually hidden text for screen reader users can come in handy (and there are also other alternatives I haven’t gone into), I’ve only given you a few of the most popular for sure. The general rule is to use it sparingly but definitely use it when you need it. And the best way to make sure you have all the text you need for screen reader users is to actually test with a screen reader. If you are on Windows then NVDA is an open source, free, and very popular screen reader. If you are on a mac then it already comes with VoiceOver screen reader.
2 Likes
very helpful! <3
thank you very much
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.