Hidden text within div tags

[wallywheels]

I'd like to know whether the following technique violates accessibility standards or doesn't constitute best practices, and I haven't found anything in the accessibility documentation to address this specifically.

For many divs that use a background image with text written on it, I've used something similar to this to make the text available:

<h1 class="about_us"><span class="hide">About Us</span></h1>


where the about_us class has a background image that reads "about us" and "hide" is set to display: none.

Is this a bad move?

(The reason I went with this instead of just an image tag is I'd like my page to follow the h1 -> h2 -> content format for SEO purposes.)

[Centauri]

Not a good idea as most screen readers will not read an element that is hidden in the css. If you get rid of the span, and use this in your "about us" class font-size: 1px;
text-indent: -1000px; it will reduce the text size and indent it way off the left of the screen so it is not visually visible, but will still be read by a screen reader.

Cheers
Graeme

[kgosser]

I was coming to this forum for just this issue. I've been using the text-indent technique for a while, but at my new job, my boss hates the outlines of a link created w/in firefox. To see what I mean, check out this image:

http://www.krisgosser.com/cw/select-lines.png








Any ideas on how to work around that?

[wallywheels]

here's a cssplay article on removing active/focus borders:

http://cssplay.co.uk/menu/nodots.html

[Centauri]

my boss hates the outlines of a link created w/in firefox.

With some layouts and situations that can be a problem. Another way is to rather than indent the text, make it as small as possible (1px) and colour and position (with padding) the text so that it blends in with the graphic background.

[kiwibrit]

I was coming to this forum for just this issue. I've been using the text-indent technique for a while, but at my new job, my boss hates the outlines of a link created w/in firefox. To see what I mean, check out this image:

http://www.krisgosser.com/cw/select-lines.png








Any ideas on how to work around that?

As discussed below - but don't forget - since this is an accessibility section - that you should have some means of highlighting hyperlinks as you tab through them on the keyboard.

[Webnauts]

For many divs that use a background image with text written on it, I've used something similar to this to make the text available:

<h1 class="about_us"><span class="hide">About Us</span></h1>


where the about_us class has a background image that reads "about us" and "hide" is set to display: none.

Is this a bad move?

(The reason I went with this instead of just an image tag is I'd like my page to follow the h1 -> h2 -> content format for SEO purposes.)

In terms of SEO, be very careful. Matt Cutts posted on his blog:
Why the big difference? Let’s view the source and check out the relevant part of the page:

silly comments

Hmm. “Insert your hidden text here. Do not forget to [embiggen] your keywords.” I don’t recommend that people use CSS to hide text, and I don’t recommend that they document it, either.
I suggest you to read the whole post, before you implement these techniques: http://www.mattcutts.com/blog/seo-mistakes-unwise-comments/

Also we have a bomb discussion about this at WebProWorld Forums http://www.webproworld.com/search-engine-optimization-forum/60110-ethical.html where Danny Sallivan have been on the thread too, as he we was cloacking and hiding text on his blog. :)

[wallywheels]

I wasn't privy to matt cutts post and that forum thread has also been very informative. I've gone ahead and redone my page titles to use the text-indent method, but I'm now concerned about the home page:

http://www.moredemand.com/

I'm mostly stuck dealing with the fact that no one invovled in the project had accessibility in mind when designing it, so we've got these graphics plastered with great content. Now my header code looks like this in order to make the content on the images available to search engines and screen readers:

<div id="header">

<div id="toplinks">
<p><a href="#"><img src="images/icon_login.jpg" border="0" alt="Login" />LOGIN</a></p>
<p><a href="#"><img src="images/icon_subscribe.jpg" border="0" alt="Subscribe" />SUBSCRIBE</a></p>
</div>

<div class="hide">
<h1>MoreDemand&trade;</h1>
<h2>Creating Sales Opportunities</h2>

<ul>
<li>New e-Marketing Technologies</li>
<li>New Pipeline Development Systems</li>
<li>Integrated On-Demand Solutions &amp; Services</li>
<li>For Companies Selling Complex Business Solutions</li>
</ul>

</div>

</div>

This is worrisome because Cutts made specific mention of the difference between having an html logo for the search engines hidden in a graphic logo and having a hidden html logo plugged with keywords. He also said that google tracks hidden text but hasn't penalized anyone on this basis yet.

There's nothing shady about plugging my content in this way. I'll I've done is reproduce the content verbatim as it appears on the image. As far as I'm concerned this is better for everyone involved, but the last thing I want is for my client to be penalized on search engines because of a bad design. Perhaps I'll post this on the webproworld forum and get some other opinions.