4

What is the best tested way to hide any text from sighted user but not from popular screen readers? and without affecting SEO.

for example if i adding any hidden text only for screen-reader users then that text should not be crawl by search engine when search engine will crawl that page.

Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
  • 3
    Adding text for screen-reader users almost always improves SEO. Search engines, like visually-impaired users, want access to content that they can't "see". – Jeffery To Apr 24 '10 at 18:06
  • 1
    I strongly disagree. Anything that hides text can be seen as a black hat SEO trick and be penalized. It's a problem area because the good guys (screen readers) and bad guys (key word stuffers and link farms) want the same thing: to hide stuff from sighted users. – Chris Tolworthy Mar 05 '12 at 15:22

6 Answers6

3

The jQuery UI CSS framework does this by positioning elements far off-screen, e.g.

.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
Matt
  • 31,662
  • 4
  • 34
  • 33
  • +1 yes it's looking good. but is there any way to hide unnecessary content from search engines. – Jitendra Vyas Apr 24 '10 at 17:24
  • Deliberately placing text off the screen is considered a black hat SEO trick. –  Apr 25 '10 at 11:26
  • 1
    @austin cheney It depends on intent. If you're hiding text that helps visually-impaired users then it's fine. If you're hiding text to do keyword stuffing then it's black hat SEO. – Jeffery To Apr 29 '10 at 07:14
  • This works, but I found that because the height wasn't changed, the height can still affect things like scroll bars. I have a solution below for this if anyone needs it – user1010892 Jun 24 '13 at 12:37
3

I'm using the system Drupal 7 class which seem to be working pretty good (and seems to be the best way so far to visually hide content, but make it available to screen readers):

.element-invisible {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

There's another class for making elements focusable, but read more in this article.

rkallensee
  • 1,994
  • 15
  • 12
  • Excellent hack as it allows the element to be shown on :focus (so, useful for people navigating exclusively with keyboards), thanks. – pixeline Sep 09 '12 at 19:08
  • Exactly - and keyboard navigation is an important part of making a website / web application accessible. – rkallensee Sep 12 '12 at 21:03
1

Answer for a part of your question. W3C Article regarding the technique to hide a portion of the link text - C7: Using CSS to hide a portion of the link text.

Excerpt from the article: This technique works by creating a CSS selector to target text that is to be hidden. The rule set for the selector places the text to be hidden in a 1-pixel box with overflow hidden, and positions the text outside of the viewport. This ensures the text does not display on screen but remains accessible to assistive technologies such as screen readers and braille displays. Note that the technique does not use visibility:hidden or display:none properties, since these can have the unintentional effect of hiding the text from assistive technology in addition to preventing on-screen display.

Pradhan
  • 11
  • 1
0

I liked @rkallensee answer and something similar is suggested on the HTML5BP style sheet. In my case though, looking on an I-Pad 4, the height was giving the browser scroll bars. It was acting as though the content was still there. That would be OK for a small amount of content but if hiding lots then it made it look as though there was more content below the website.

I could just add a height of 1px. But I'm measuring heights inside my div using JS which messes up. I've found that using a max-height:1px solves both issues. The code I'm using is:

clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
position: absolute;
max-height:1px;
user1010892
  • 1,179
  • 3
  • 14
  • 25
0

In your HTML: 

<span class="hideMe">some text</span>

In your CSS:

hideMe{display:none;}
  • 1
    no it will be hidden fro screen readers also http://stackoverflow.com/questions/1755656/displaynone-vs-visibilityhidden-vs-text-indent9999-how-screen-reader-behave-wi/1755717#1755717 – Jitendra Vyas Apr 24 '10 at 16:34
  • No, it would not. Screen readers do not read stylesheets. The only way to make that hidden from screen readers is to put the display:none inline. –  Apr 25 '10 at 11:22
  • 1
    @austin cheney Screen readers read what is on the screen. Elements hidden with "display: none", except for certain cases, are hidden from screen readers as well. See http://juicystudio.com/article/screen-readers-display-none.php – Jeffery To Apr 29 '10 at 07:02
  • @Jeffery To No, I know that is not true from my own usability testing with Jaws. Screen readers do not read stylesheets. Period. display:none hides text from screen readers only when it is inline to the specific HTML tag(s). –  Apr 29 '10 at 07:10
  • @austin cheney Which version of JAWS did you test? Which browser? Which browser version? Did you try Window-Eyes? NVDA? VoiceOver (on Mac)? – Jeffery To Apr 29 '10 at 08:12
  • @Jeffery To I cannot remember as its been a little while. I do not have much need for screen reader testing in my current position in Afghanistan. –  Apr 29 '10 at 08:26
  • From my experience, current major screenreaders don't care how the attribute ended up on the element - whether from internal or external stylesheet, inline style attribute, or set via DOM: all tend to access the live DOM (either directly via DOM interfaces or indirectly via MSAA or some other platform accessibility interface) and respect the current value of the attribute. – BrendanMcK Oct 19 '11 at 13:42
0

Well, you've got display:none, visibility:hidden, and placing the text far off-screen.

Not all screen readers follow the standards, and there's no standard way of dealing with non-standard behavior.

You can't use HTML and CSS to hide content from screen readers, yet have it visible to real people. If it's in the page, it's in the page for everyone. At best, you could use robots.txt to prevent the engine from scraping the page.

eaolson
  • 14,717
  • 7
  • 43
  • 58
  • 1
    display:none and visibility:hidden is ignored by most mainstream screenreaders (JAWS, NVDA); "far-left text" is currently read by most - and is a fairly common way of having "screenreader-only content". Best described as a "generally accepted hack", perhaps. – BrendanMcK Oct 19 '11 at 13:37