How to hide any text from sighted user and search engine but not from screen reader?

Question

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.

Answer 1

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

.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }

Answer 2

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.

Answer 3

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.

Answer 4

In your HTML:

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

In your CSS:

hideMe{display:none;}

Answer 5

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.

Answer 6

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;