Text Replacement Method -9999px
October 2nd, 2008
A lot of times when we make websites we come to a place where we use an image where we would really prefer to use text for accessibility or SEO reasons. Sure we could use the image and utilize the alt tag, but that doesn’t rank nearly as high for SEO as if we’d actually use text. So what do we do? A text replacement method. The way I do it is by using text-indent and setting it to -9999px. I’ve heard other people say that they just make the text hidden, but I’ve heard that screen readers won’t read the hidden text, I’m not sure who’s really right, but I do know that the -9999px method works great for me.
How it works, you have a logo, like the little font treatment I’m using. I want that pretty graphic, but I also want that to have some clout for SEO.
HTML
<div id="header">
<h1>How to CSS</h1>
</div>
So I have a div called header, and an h1 tag with the site name in it. How do I replace that text with an image?
The CSS
#header h1 {position: absolute; left: 0; top: 85px; width: 175px; height: 38px; display: block; text-indent: -9999px; background: url('images/howtocss.png') no-repeat;}
I’m taking that text, shooting it off to the left, leaving only the background image visible, which is the logo. I give the tag a width and a height to mirror the dimensions of the image, and I set the display to block so it is clickable.
I’m working up some larger, more in depth stuff. This is hopefully just a little taste to keep you happy in the mean time.
Tags: -9999px, CSS, text replacement
This entry was posted on Thursday, October 2nd, 2008 at 8:55 pm and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Leave a Reply