To display none or not to display none that is the question

[caravan]

When coding a website I use css as a layout tool and strive to make the website as accessible as possible. I therefore will apply images to the div's as backgrounds. If an image includes a text of some sort such as a headline I will include a text version in the html but give it a class which gives it a display: none. The reason I do this is to quite rightly address accessibility issues and not as a means of spamming.

After reading the following matt cutts post from a while back and having discussed things with a colleague I'm now wondering whether this way of working could potentially be harmful. Should I be using hard coded images with alt tags?

[Dubbya]

It's all about intent.

Most sites that get banned are manually checked after the SE tosses a flag during the indexing process or when someone personally reports the spammer.

If your intent is to provide information relative to the image, with the intent of increasing accessibility or to provide more detailed information, you've nothing to worry about.

Worst case scenario, if the site were to get banned, you could send an email request for reinclusion, explain your intentions and ensure that the site meets inclusion guidelines.

Now, if sole purpose of hiding layer information using "display:none" is to gain an advantage over your competition by spamming the SE's, well that's another story entirely.

Tread softly and ask yourself if what you're doing could easily be mistaken as an obvious attempt to spam the SE's using "hidden text". If you think it's a little over the top, it probably is.

.02

[bj]

If you are using a legitimate css image replacement technique on ONE image for the header, then this is not going to bring a penalty. If you're doing it with 20 images it may raise a red flag. As Dubbya said, it's about intent.

There are better and more legitimate ways to do this anyway. display: none; is not the best way. Just google "css accessible image replacement" and you'll come up with the top methods.

[inertia]

The example that matt cutts has given does use a lot of image replacement and i have also seen lots of sites do this with their h1 tag but still perform well.

[datetopia]

You can hide it from JavaScript on page load and prevent automated detection of the hidden element.

A human will probably understand your good intentions but not sure if crawling program will. You should avoid the possibility of being judged by a machine if you can.