[mrsminkie]

I like to use images for my main titles. Advice on this site with one I was struggling to layout was to set the image as a background. There is text set as display:none underneath. I have some titles however as images within the html, with titles, so that when you hover over them you get alt text.

What is the correct/best way to be doing this as far as SEO and accessability goes?

thanks

[taffybach]

You're on the right track. Most search engines do index the ALT tag so this will help and I always esnure that any images used display an ALT text.

[mrsminkie]

Thank you. But which method should I use, or does it not matter so long as images have titles, and background images has hidden text?

[Stardog]

I would do something like:

h1 {
background: url(img.gif);
text-indent: -9999px;
}

There shouldn't be any need for tooltips when you hover over any headers. I think img titles mostly help google image search, which I doubt you want headings showing up in.

Screenreaders will also read the indented text.

[mrsminkie]

Stardog, on 06 January 2010 - 09:38 PM, said:

I would do something like:

h1 {
background: url(img.gif);
text-indent: -9999px;
}

There shouldn't be any need for tooltips when you hover over any headers. I think img titles mostly help google image search, which I doubt you want headings showing up in.

Screenreaders will also read the indented text.

That's what I was doing. But then I was advised on here to hide the text using display:none. That makes the image disappear so I have to split it up and have a div/class for each heading and have a background image for the div/class and then hide the html text. Seems messy.

[rallport]

In google's webmaster guidlines they recommend not hiding text from a users view and having hidden text purely for seo - which is in essence what you're doing with a negative text indent. This is quite a grey area on the web.

Using an empty span tag is quite popular:

<h1 class="meh">
 <span></span>seo spam

h1.meh {
 width: 350px; height: 75px;
 position: relative;
 }
 h1.meh span {
 background: url("image.jpg");
 position: absolute;
 width: 100%;
 height: 100%;
 }

There are loads of image replacement methods described here.

[mrsminkie]

rallport, on 07 January 2010 - 12:30 AM, said:

In google's webmaster guidlines they recommend not hiding text from a users view and having hidden text purely for seo - which is in essence what you're doing with a negative text indent. This is quite a grey area on the web.

Using an empty span tag is quite popular:

<h1 class="meh">
 <span></span>seo spam

h1.meh {
 width: 350px; height: 75px;
 position: relative;
 }
 h1.meh span {
 background: url("image.jpg");
 position: absolute;
 width: 100%;
 height: 100%;
 }

There are loads of image replacement methods described here.

Thanks I'll have a look and give it a go.

[Stardog]

Some of the most well-known web designers I know use text-indent. If it's not a picture then they'll embed the font into the site itself:

http://www.31three.com
<h1><span class="text_hide">Creative services for the design challenged developer</span></h1>

display:block; text-indent:-9999px;

http://thingsthatarebrown.com
text-indent on the nav li.

[MrBrightside]

I tend to use text-indent, but also have <span> tags inside those headings. The span tags don't do anything at the moment but the point in having them is for future-proofing; if text-indent does become penalised I could easily switch to an alternate method of hiding the text using CSS instead of having to edit all my HTML files.

Of course, CSS3 comes with an nice and elegant solution:

h1 { content: url('image.png'), your_text }

which displays image.png but also allows you to specify the hidden text. So hopefully text-indent will last until CSS3 becomes common.