Replacing H1 text with a logo image: best method for SEO and accessibility?

Question

It seems like there are a few different techniques out there, so I was hoping to get a \"definitive\" answer on this...

On a website, it\'s common practice to create

Answer 1

I do it mostly like the one above, but for accessibility reasons, I need to support the possibility of images being disabled in the browser. So, rather than indent the text from the link off the page, I cover it by absolutely positioning the to the full width and height of the and using z-index to place it above the link text in the stacking order.

The price is one empty , but I'm willing to have it there for something as important as an

.

  Stack Overflow

#logo a {
   position:relative;
   display:block;
   width:[image width];
   height:[image height]; }

#logo a span {
   display:block;
   position:absolute;
   width:100%;
   height:100%;
   background:#ffffff url(image.png) no-repeat left top;
   z-index:100; /* Places  on top of  text */  }