Tips to provide accessible content but hide it from non-disabled browsers

[McBenny]

Hi folks,

One more time I'm wondering if what I usually do to provide accessible content is good or not. Is it really accessible, is it visible for search engines, isn't it seen as spamdexing ?...

Help me !

Well, here is a situation and my solution. Is it good ? what do you do in that situation ?...

I have a header that is treated as an image. This image conveys text but for me, it's not an illustration, therefore it shall not be treated as an <img>.
What I do :

<h2><span class="accessibility">Last News</span></h2>

with this stylesheet :

h2 {
background:url("last-news.png") no-repeat;
height:60px;
width:180px;
}
.accessibility {
font-size:0;
height:0;
left:-9999em;
overflow:hidden;
position:absolute;
top:-9999em;
width:0;
}

With this technique, the text content is here (so it's accessible), and a modern browser hides the text and replaces it with the image. But what about the search engines ? Do they see the text ? Do they think it's spamdexing ?
What do you think of this "accessibility" class ?

[manycheese]

Hi, the principle behind what you're doing is correct!

I use it all the time. The search engine will see the text and I'm pretty sure it won't get annoyed at your using this technique.

A better method is it use 'text-indent:' and then something like -9999em

This way you dont have to use position,left,top or overflow.

Here's an example for a site I reccently created, note: it's for the main logo of the site.

" #header > #logo{
width:100px;
height:90px;
text-indent:-6000px;
background:url('../images/logo.png') no-repeat;
float:left;
}"

[rguy84]

McBenny, What you did is fine. Remember search engines see the code, not the web page. So it sees the words, not what you are doing to them. As long as you aren't putting female/male body part names, drugs to enhance those parts, or other drugs you are fine. i disagree with many with using text-indent. However you can make the class:

.accessibility {
left:-9999em;
position:absolute;
}

What you are doing is actually called [css] image replacement

[Stomme poes]

One problem with this:

if the image doesn't load, or if the user has images turned off (slow wi-fi connection, using a mobile, whatever), there's nothing to read. Sure, it's accessible to screen readers and the googles, but it's not accessible to everyone (unless they turn the CSS off too).

I rather like this version of image replacement so long as your images are large enough

McBenny:
you have
.accessibility {
font-size:0;
height:0;
left:-9999em;
overflow:hidden;
position:absolute;
top:-9999em;
width:0;
}

be aware there are two problems in there you may or may not run into: first, Opera has a limit (in pixels) for page widths and heights (!). I've found Opera showing stuff I'm pulling up with -9999em on the screen because 9999em hits that limit. Also Konqueror web browser has a similar issue with left -9999em: it can and will sometimes wrap that around to the far right side of your page, giving you a ginormous scrollbar.

Both those are taken care of by reducing the ems to -999 (just three 9's). I know, I've run into all of those problems : )

Second issue, one I don't know how relevant it is now: Window-Eyes screen reader for Windows used to (not sure about versions after 7) read out stuff that was positioned above the top of the page first, before the rest of the page, and then it would announce it again when the user got to the real location.

To avoid this I tend to stick to using left rather than also top (in some places I've needed to use top as well but most of the time left is good enough).

[McBenny]

be aware there are two problems in there you may or may not run into: first, Opera has a limit (in pixels) for page widths and heights (!). I've found Opera showing stuff I'm pulling up with -9999em on the screen because 9999em hits that limit. Also Konqueror web browser has a similar issue with left -9999em: it can and will sometimes wrap that around to the far right side of your page, giving you a ginormous scrollbar.

Both those are taken care of by reducing the ems to -999 (just three 9's). I know, I've run into all of those problems : )

Second issue, one I don't know how relevant it is now: Window-Eyes screen reader for Windows used to (not sure about versions after 7) read out stuff that was positioned above the top of the page first, before the rest of the page, and then it would announce it again when the user got to the real location.

To avoid this I tend to stick to using left rather than also top (in some places I've needed to use top as well but most of the time left is good enough).

Well thank you very much for this information, that's typically what I wanted to hear in exposing my technique. I'll adapt my class to match your requirements.

One thing I was wondering was the font-size. Doesn't a search engine consider that the text may not be indexed as its size is 0 ?

[Stomme poes]

Doesn't a search engine consider that the text may not be indexed as its size is 0 ?

Since that was at one time a popular blackhat technique for spamming search engines, I can't say they don't react at all to that (I still haven't figured out how, since the spiders themselves do not look at the CSS sheet at all).

So far as I know it would be indexed, but again, sighted users without the image can't read a 0px font size : ) Lindsay method has that problem.

Here's what you want to do with any webpage you've built:

View it with images and Javascript and CSS off. This is how a search engine sees your page. (well, they'll read your alt text, but they'll also index the image file so it appears in their image searches)

View it with CSS on and images off. This is a user with a slow connection or a device they've turned images off so they don't spend 30 minutes loading your page.

View with CSS and images on but Javascript off. This is how a user without JS sees your page. It doesn't have to look pretty, but the forms and links must work, and the text must be readable. Basically, the page has to function.

A "typical" screen reader user with a non-ancient reader will get your page mostly like it is with CSS and images off, except they can tell the semantics of the page (headers, lists, tables, forms, links and non-links), and display: none and visibility: hidden are honoured by many readers (so that's why people use negative text-indent: this is still read out by screen readers fine).

More screen reader users have Javascript on by default than not (they still surf through a browser), but they come across more sites that don't work with a reader with Javascript so more screen reader users may have it turned off than the general population (or selectively turned off per domain).