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.
The jQuery UI CSS framework does this by positioning elements far off-screen, e.g.
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With