Text hiding and keeping search engines onside

[martal]

I'm sure this has been asked before so please point me in the right direction.

First I have a background image to my header/banner div which actually has my H1 and H2 text but in a visually appealing way.

Simply:
<div id="name">
<h1>Main header</h1>
<h2>Secondary header</h2>
</div>

and:
h1, h2 { display: none; }

Is this liable to get the site booted off, say Google, where it already is #1 for the likely search term?

And it's not good for accessibility.

Also, I need to hide the text of a link, where the background image is sufficient. A &nbsp; allows the whole list item to display as a link, but this is bad semantically.

Any ideas?

[doritoz]

Yes, the header trick could be bad news. A better solution is something like this:
<div id="name">
<h1><img src="header-image.gif" alt="Header Text" /></h1>
<h2><img src="subheader-image.gif" alt="Subheader Text" /></h2>
</div>

That way, the alt text is still getting the h1 credit.

Why do you need to hide the link's anchor text?

[swa66]

"text-indent: -5000px" will put the text out of the "picture" and you can then use your background image to replace it. As long as the image says the same as the text that should be ok with accessibility (although those needing really big fonts might hate you for it) and manual reviews from search engines.

[martal]

doritoz, my image link must be a background image defined in the style sheet. It sits in an include file (SSI) and there are path problems if I have it as a normal image link.

The image includes the name of the organisation, so it is superfluous to have it again.

So, in a style sheet with background images off, for print or handheld say, there will be no link at all, unless I can somehow have the link in the html, but overridden by the background image on normal display.

swa66, I don't want to take any chances with Google. I have heard that once bumped, it's nigh impossible to back on, so I have set my text-indent to -3000. Thanks for the tip.

It's conceivable that such high-res devices will appear, but unlikely that you would be viewing my website in a full windows. :}

[g1smd]

*** "text-indent: -5000px" ***

I don't like that idea at all.

[martal]

I've now taken my text indent down to -1000px. It would be a strange (and expensive) setup where this would appear but not impossible.

With some research, I can't get any clear idea in my head on how Google (and other SEs) consider this but such techniques are common, as is display: none and visibility: hidden, including in DHTML menus. So I am going to take my chance.

I fixed my link hiding by including the link text in a span, and indenting that by -1000px.

<ul id="theID">
<li id="anotherID"><a href="#" title="the title"><span class="shift">link text</span></a></li>
</ul>

.shift {
display: block;
text-indent: -1000px;
}

[martal]

I posted too soon.

My headers are showing in front of my banner background image at -1000px.

My screen is 1280 x 1024, the browser window is slightly sized.

Looks like it's going to be -3000px,

[swa66]

*** "text-indent: -5000px" ***

I don't like that idea at all.

So ... how do you propose we replace e.g. the company name with the logo (showing the name) on a browser that's capable of doing graphics without forcing the text-only browsers into not showing anything at all ?

Replacing text with graphics isn't new and AFAIK the text-indent technique is well accepted.