Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 295
Jitendra Vyas Avatar asked Sep 15 '25 01:09

Jitendra Vyas


2 Answers

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

.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
like image 112
Matt Avatar answered Sep 17 '25 16:09

Matt


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.

like image 42
rkallensee Avatar answered Sep 17 '25 16:09

rkallensee