Will using CSS to hide in-line text for screen-readers affect SEO?

Question

There's one practice I really enjoy because it's great for accessibility and for people who use screen reader, but I was wondering if Google could consider this ''an attempt to fool him'' and blacklist me for this? Here's my example : When I create a logo that is the name of the company, I really enjoy do this :

<h1>
  <a href="index.php">
    <img src="my_cool_logo.png" alt="Coolness Inc Logo" />
    COOLNESS INC
  </a>
</h1>

And then, I'd do text-indent: -9999px; in my CSS to push the text out of the screen, but people with screen reader would be able to read it... what do you think? Bad or good practice and could I be blacklisted for this?

Answer 1

Short answer: Yes, it's not a good practice.

Long answer: Screen readers do read the ALT tag; as that's primarily the reason the ALT attribute was included in the tag. See more.

As of now the Googlebot does not parse CSS and Javascript.. The day may not be far where it might start pulling all the associated files and study the rendering of the page.. I found an interesting article (When Google understands CSS files) that discusses this possibility a while ago. So you are no alone in thinking this way.. :)

Google could start to simply query a website just like a browser does and then parse the object model. How would your pages rank when Google actually "looks" at them?

Spammers generally place many trending keywords in the HTML to help improve their search rankings but smartly hide these keyword dumps from the user by CSS. Googlebot is smart enough to detect such dumps and puts up a penalty for such sites. So YES, Googlebot can understand CSS to a certain extent (and I in no way intent to question the great minds at Google and the capabilities of the Googlebot :) )

So I would be weary and not overdo it..

Answer 2

In this very case, you wouldn't need to add and hide the text, as that is what the alt attribute is used for. A screen reader would read the company name two times.

However, you should change the content of your alt attribute. "Coolness Inc Logo" is not the description of the images's content. You should use "Coolness Inc" (without "Logo") instead.

In other cases this text hiding technique (or a similar one, like using clip) might be used, but you shouldn't misuse it. If you are only using it for a few small sentences (help text, image replacement, etc.), no search engine should have a reason to penalize.