Making logos accessible is actually much easier than many make it out to be. It is important to make your logos accessible as you want them to have a strong search engine presence.
For this tutorial you will need to have a basic understanding of XHTML and CSS.
First comes the HTML. Generally your logo is nested in the header like this.
<!--HTML Code-->
<div id="header">
<a href="home"><img src="yourlogo.jpg" alt="COMPANY NAME" /></a>
</div>
To make this more accessible and for it to degrade gracefully we really want to eliminate the “img” element and in turn use a text elements like this
<!--HTML Code-->
<div id="header">
<h1><a href="home.htm">YOU COMPANY NAME AND ANYTHING ELSE</a>
</div>
In the above case if a user views the page un-styled they will simply see an H1 header link with the name of your company and any other text you place inside. This allows search engines to read the actual logo in plain text and assign this text an important value (first H1 elements are seen as important). It also improves mobile device structure as many of them don’t like images.
Now we can use CSS to make the image based logo appear where we want it and more importantly how we want it (image). We only need to style two elements, the ‘H1′ and ‘a’ tags.
/*CSS Code*/
#header h1{
width:auto;
height:auto;
text-indent:-9000px; /*This removes the text from the screen*/
}
#header h1 a{
width:300px;
height:100px;
background:transparent url('path/to/your/image.jpg');
display:block; /*This is critical*/
}
In the ‘H1′ element you will notice that we gave it a text-indent of -9000px. This moves the the text far enough off the left side of the page that even with the largest monitor it is not visible. By doing this we ensure that pesky text doesn’t sit on top of our beautiful logo.
The next unusual piece you will find in the CSS is under the ‘a’ element. “Display:block;” renders the ‘a’ element as a block level element allowing it to have a fixed width and height.
Now you have a beautiful logo that degrades seamlessly and is extremely accessible both to humans and search engines.
I recently found a site that looks an awful lot like mine. It uses a similar background and layout. To check it out cruise it over to www.sullr.com/us/. At first I was concerned I might some how be infringing on their copy write but after doing some research I have determined that this is unlikely as their site wasn’t even registered until after I debuted my first iteration of this design. It is important to note that in the first iteration I used a vibrant green closer to the one being used by by Sullr. My original design can be viewed at old blog. Needless to say I have started working on a new design and hope to have it up soon. Until then enjoy a great looking reverse lookup engine ;)