Reemplazar el texto H1 con una imagen de logotipo: ¿el mejor método para SEO y accesibilidad?

Parece que existen algunas técnicas diferentes, así que esperaba obtener una respuesta "definitiva" sobre esto...

En un sitio web, es una práctica común crear un logotipo que enlace a la página de inicio. Quiero hacer lo mismo, mientras optimizo mejor para motores de búsqueda, lectores de pantalla, IE 6+ y navegadores que han deshabilitado CSS y/o imágenes.

Ejemplo uno: no usa una etiqueta h1. No es tan bueno para el SEO, ¿verdad?

<div id="logo">
<a href="">
<img src="logo.png" alt="CreandoLaRed" />
</a>
</div>

Ejemplo dos: Encontré esto en alguna parte.

<h1 id="logo">
<a href="">CreandoLaRed</a>
</h1>
/* css */
#logo {
padding: 70px 0 0 0;
overflow: hidden;
background-image: url("logo.png");
background-repeat: no-repeat;
height: 0px !important;
height /**/:70px;
}

Ejemplo tres: Mismo HTML, enfoque diferente usando sangría de texto. Este es el enfoque "Phark" para el reemplazo de imágenes.

<h1 id="logo">
<a href="">CreandoLaRed</a>
</h1>
/* css */
#logo {
background: transparent url("logo.png") no-repeat scroll 0% 0%;
width: 250px;
height: 70px;
text-indent: -3333px;
border: 0;
margin: 0;
}

#logo a {
display: block;
width: 280px;
height: 120px;
text-decoration: none;
border: 0;
}

Ejemplo cuatro: el método Leahy-Langridge-Jefferies . Aparece cuando las imágenes y/o css están desactivados.

<h1 id="logo" class="logo">
<a href="">CreandoLaRed</a>
</h1>
/* css */
h1.logo {
margin-top: 15px;
position: relative;
overflow:hidden; 
padding: 0; 
}

h1.logo a {
position: absolute; 
height: 0; 
width: 100%;
background-position: left top;
background-repeat: no-repeat;
}

h1#logo {
height: 60px;
}

h1#logo a {
padding-top: 60px;
background-image: url("logo.png"); 
}

¿Qué método es el mejor para este tipo de cosas? Proporciona html y css en su respuesta.