Ir directamente al contenido de esta página
Todd Fahrner desarrolló la técnica original (conocida como FIR, de Fahrner Image Replacement) de sustitución de un encabezado por una imagen, y la dio a conocer en este artículo (inglés).
La idea básica consiste en que al encabezado —el elemento h1— como tal se le asigna una imagen de fondo y también un tamaño suficiente para que ésta sea visible en su totalidad. El texto incluido en esa imagen aparece en una capa propia —un span— que se incluye dentro de ese mismo encabezado, y que se oculta gracias a CSS. El código es el siguiente:
<h1 id="encabezado"/><span>Aquí viene el encabezado</span></h1>
#encabezado {
background: url(encabezado.gif) no-repeat;
width: 200px;
height: 20px;
}
#encabezado span {
display: none;
}
Así, si el navegador visitante soportaba hojas de estilo, el usuario veía la imagen; si no las soportaba, veía el texto. La idea parecía buena, salvo por el detalle de que añadía un span sin ningún valor desde el punto de vista del marcado semántico.
Sin embargo, el auténtico problema lo documentó Joe Clark, quien demostró los problemas de accesibilidad que esta técnica suponía en este otro artículo (inglés). Desde entonces, de hecho, los principales problemas en el desarrollo de soluciones alternativas han tenido que lidiar con el problema de mantener el contenido del encabezado accesible.
Básicamente, el problema del FIR reside en que al asignar display: none al texto del encabezado, no sólo desaparezca de la vista del usuario, sino que se eliminaba totalmente del flujo del documento. Como consecuencia, los lectores de pantalla pueden detectar que en el documento existen uno o varios encabezados, pero para ellos en tales encabezados no hay nada. El propio Clark realizó pruebas con diferentes lectores —Hal, IBM Home Page Reader, Jaws, OutSpoken y Window-Eyes— y descubrió que sólo el tercero de estos era capaz de acceder al texto del encabezado. Los resultados con visibility: hidden en lugar de display: none no fueron mucho más alentadores.
Actualmente esta técnica se desaconseja si se persigue —como se debería— el desarrollo de contenidos accesibles.
Como he dicho antes, el problema de la sustitución no es tanto lograr reemplazar el texto de un encabezado por una imagen, sino cómo conseguir que el texto siga estando disponible para los lectores de pantalla, o para los usuarios que hayan decidido bloquear voluntariamente las imágenes de un documento.
Seamus Leahy y Stuart Langridge desarrollaron su técnica1 (inglés) centrándose en eliminar el span sin significado. Para ello, decidieron aplicar al encabezado la altura de la imagen de sustitución, establecida como fondo. Lo único que hace falta entonces es ocultar el texto, y para ello lo desplazan verticalmente fuera de la caja por medio de un relleno que tiene el mismo tamaño que la imagen, y después asignan un desbordamiento oculto, de esta manera:
<h1 id="encabezado">Aquí viene el encabezado</h1>
#encabezado {
padding: 20px 0 0 0;
overflow: hidden;
background: url(encabezado.gif) no-repeat;
}
El primer problema de la técnica se presenta cuando topamos con Internet Explorer 5 o 5.5, por su incorrecta implementación del modelo de caja. Como el relleno se interpreta como parte de la altura total de la caja, no es visible a menos que se le asigne una altura, en este caso la misma que la altura de la imagen de fondo. Pero al hacer esto, el resto de los navegadores añaden correctamente el relleno a la altura, con lo que la imagen desaparece. La única solución, por tanto, es aplicar un hack para Explorer:
#encabezado {
padding: 20px 0 0 0;
overflow: hidden;
background: url(encabezado.gif) no-repeat;
height: 0px !important;
height /**/: 20px;
}
Una advertencia: es necesario incluir un espacio en blanco antes de /**/ para que el hack funcione.
Otro problema de esta técnica es que puede darse el caso de que por algún motivo la imagen no esté disponible —o bien que el usuario la haya bloqueado— pero que el soporte de CSS esté activo. Bajo estas condiciones, el texto desaparece de la caja, pero la imagen no se muestra, quedando un mero vacío. Los usuarios de un lector de pantalla podran acceder a la información, pero el resto de usuarios no.
Ejemplo del método Leahy & Langridge.
Analizando la técnica de Fahrner, Mike Rundle resumió el problema básico de la accesibilidad del reemplazo: The goal is to keep the text "visible" to the browser, but hidden to the user —en este artículo (inglés)—. Con ello en mente, y tratando de evitar también el empleo de elementos no semánticos, Rundle propuso una solución aún más simple: sacar el texto de su caja —a la que se le aplica la imagen de reemplazo—, por medio de una amplia sangría negativa:
<h1 id="encabezado">Aquí viene el encabezado</h1>
#encabezado {
height: 20px;
text-indent: -9999px;
background: url(encabezado.gif) no-repeat;
}
Efectivamente, un lector de pantalla no se ve afectado por la sangría. Sin embargo, la técnica no está exenta de problemas. El primero de ellos es que en Internet Explorer 5, la imagen de fondo se ve afectada por la sangría, y se mueve con el texto, por lo que un usuario corriente no puede ver tampoco la imagen alternativa al encabezado. Y en segundo lugar —y tal vez el problema más grave— ocultar por medio de sangrías y márgenes negativos contenidos al usuario pero de forma que sean visibles para los navegadores es una técnica común de SEO ilícito, por lo que puede afectar negativamente a la posición de una página si los responsables de los buscadores lo interpretan como tal práctica ilegal.
Como en el caso de Leahy y Langridge, Tom Gilder y Levin Alexander llegaron por las mismas fechas a una solución —descrita en este artículo (inglés)— que se basa en incluir una capa dentro del h1 que contenga la imagen de reemplazo, y hacer que ésta se extienda hasta rellenar la caja del encabezado, de la siguiente forma:
<h1 id="encabezado"><span></span>Aquí viene el encabezado</h1>
#encabezado {
position: relative;
width: 200px;
height: 20px;
}
#encabezado span {
background: url(encabezado.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
El span se extiende hasta cubrir el texto adyacente. Dejando a un lado que una imagen transparente dejaría ver el texto a través de sí, el problema es que si un usuario con problemas de visión reducida amplía mucho el texto, éste puede sobresalir por debajo de la imagen. Y además, de nuevo se repite el problema de que ese span es un marcado semánticamente incorrecto.
Ejemplo del método Gilder & Alexander 2.
Shaun Andrews, como comentario a un artículo de Dave Shea: (inglés), propuso una solución similar a la de Gilder y Alexander, pero que emplea el z-index de los elementos en lugar de su position, de esta manera:
<h1><span>Aquí viene el encabezado</span></h1>
h1 {
background: url(encabezado.gif) no-repeat;
width: 200px;
height: 80px;
}
h1 span {
position: relative;
z-index: -1;
}
Así, aunque el método simplifica las declaraciones de CSS, presenta las mismas ventajas y desventajas que el método anterior: el texto es visible si la imagen no se carga, pero sigue empleando un span sin significado, y las imágenes transparentes dejan ver el texto subyacente.
Afortunadamente, en la medida en que los navegadores implementen correctamente CSS 3 podremos emplear métodos estándar para lograr estos efectos de reemplazo —y evitarnos dolores de cabeza—. Concretamente, CSS 3 ya incluye un módulo dedicado a la generación y reemplazo de contenido (inglés), en cuyo subapartado 11 se describe la técnica concreta (inglés).
En definitiva, cada una de las técnicas conlleva sus propios problemas, y el criterio para elegir una u otra depende de los niveles de accesibilidad y de marcado estricto que requiera un sitio o que se imponga el autor —salvo el caso de FIR, que sí ha sido ampliamente desaconsejada en círculos profesionales—. Para facilitar la comparación, resumo en la tabla siguiente los problemas que plantea cada técnica de reemplazo:
| ¿Accesible para lectores de pantalla? | ¿Capa sin contenido semántico? | Hack de CSS | ¿Funciona con CSS activado e imágenes bloqueadas? | Otros | |
|---|---|---|---|---|---|
| |||||
| FIR | No | Sí | No | No | |
| Leahy & Langridge | Sí | No | Sí | No | |
| Rundle | Sí | No | No | No | 1,2 |
| Gilder & Alexander | Sí | Sí | No | Sí | 3,4 |
| Andrews | Sí | Sí | No | Sí | 3,4 |
