CSS to hide text
Robert Wellock suggested in another thread that it would be possible to use CSS to hide text in visual browers.
What I'd like to do is use CSS to hide the words, "You are here:" from a navigation bar in the standard visual browsers (they'd be unnecessary and asthetically displeasing), but make them available otherwise.
If anyone had any tips on how to do this, it would be appreciated.
Share: 
(X)HTML
| Code: |
| <span class="youarehere">You are here:</span> Home > Foo > Bar |
CSS
| Code: |
| span.youarehere { display:none; } |
Will also not be read by some screen readers.
Cheers,
Nigel
Accessify Forum Administrator ~ Nigel Peck / MIS Web Design
"Everything I say is not meant to be set in stone" - Van Morrison
Share:
| Nigel Peck wrote: |
| Will also not be read by some screen readers. |
Bummer about these screen readers. It seems that just about everything is a problem ... from giving us any kind of standard to work toward to cost.
Share:
| Nigel Peck wrote: | ||
|
I'd suggest abstracting it even further (this code suggests a specific use), and not only make that class available to just spans with that class e.g.:
| Code: |
| <span class="hideFromScreen">You are here:</span> Home > Foo > Bar
.hideFromScreen {display:none;} |
You can then use that on anything that you want to hide from screen (assuming that the CSS is linked to with a media="screen" attribute)
Build Your Own Web Site the Right Way!
A beginners' HTML/CSS book with web standards at its heart
The Ultimate HTML Reference
A complete reference, in glorious hardback
Share:
There's advantages to both, if you use my method and need to change hiding a certain element later on you can change your style in one place and it's done.
With your method you only have one style rule for all your hiding so it's a smaller CSS file if there is a lot you want to hide.
Cheers,
Nigel
Accessify Forum Administrator ~ Nigel Peck / MIS Web Design
"Everything I say is not meant to be set in stone" - Van Morrison
Share:
I realise this is an old post however I don't want anyone reading it and getting outdated information... if you want text to be readable by non-visual users (using a screen reader) then you should position the text of the screen using...
position:absolute; left:-9999px; or text-indent:-9999px;
Using display:none; will remove the text from the flow of the document and JAWS/NVDA will not read the text out... if you don't want the text to be read out to anybody then use display:none;
Share:
| Lletnek wrote: |
| I realise this is an old post however I don't want anyone reading it and getting outdated information... if you want text to be readable by non-visual users (using a screen reader) then you should position the text of the screen using...
position:absolute; left:-9999px; or text-indent:-9999px; Using display:none; will remove the text from the flow of the document and JAWS/NVDA will not read the text out... if you don't want the text to be read out to anybody then use display:none; |
Thank you for posting that, I was about to say the same thing. I use that method to hide the text for skip links and other useful text that does not need to be viewed by the general public
Share:
Remember that disabled people are part of "the general public". We understand what you mean and that there's no ill intent, of course. It's easy to say things which are accidentally discriminatory.
Share:
| Lletnek wrote: |
| I realise this is an old post however I don't want anyone reading it and getting outdated information... if you want text to be readable by non-visual users (using a screen reader) then you should position the text of the screen using...
position:absolute; left:-9999px; or text-indent:-9999px; Using display:none; will remove the text from the flow of the document and JAWS/NVDA will not read the text out... if you don't want the text to be read out to anybody then use display:none; |
Hiding text is a no-no in the search engine world. Would your method fall under the guise of hiding text?
Share:
IMO I don't think you need to hide text from sited uses and you don't need to patronise blind users with useless bits of information like "you are here". For jump links you may hide them initially but make them visible on screen when moused over and key focused. The code you are looking for is here...
| Code: |
| ul#AccessLinks{position:absolute; left:-2000em; z-index:9999}
ul#AccessLinks a:focus, ul#AccessLinks a:active{position:absolute; left:2000em; width:200px; text-align:center; font-weight:bold; padding:10px; color:#000; background:#fbe626; top:0; text-decoration:none; z-index:999} |
| Code: |
|
<ul id="AccessLinks"> <li><a href="#Content">Jump to content</a></li> <li><a href="#Search">Jump to search</a></li> </ul> |
| kalidust wrote: |
| Hiding text is a no-no in the search engine world. Would your method fall under the guise of hiding text? |
Johan De Silva / Portfolio
Share:
Hi, there is a site http://www.webaim.org/articles/ that has some decent stuff on how to do handle that sort of thing, the part I have just been using is http://www.webaim.org/techniques/css/invisiblecontent/ as i have a hidden link just for trapping the harvesting robots that go around trawling for email addresses, there is a whole lot of good code examples on there.
Regards,
Phill.
Share:
You are welcome !!
Regards,
Phill.
Share:
Google search bots see all text in a document.
It doesn't apply styles so both "display:none" and "position off-screen" methods are ignored.
mike foskett
<marquee><blink><work> webSemantics </work><rest> 2kool2 </rest> & <play> bangers & mashed </play></marquee></blink>
Share:
Good evening,
please note that Mozilla doesn't hide invisible text styled with position strategies as {left:-2000em;}.
I had to apply {font-size:0em;}.
Share: