Armonía | En definitiva...

Muchas veces, principalmente por motivos de diseño, necesitamos sustituir un pequeño párrafo, o un título, o cualquier pieza de texto por una imagen. Como ya sabemos, si la imagen no añade información al documento, lo ideal es colocarla mediante CSS, ya que dicha imagen formará parte del aspecto visual de la página y no de su contenido.

Para conseguir esto hay muchas técnicas, la primera en hacerse "popular" fue la ya conocidísima FIR, (Fahrner Image Replacement), que consiste en ocultar mediante CSS con un display:none; un elemento span contenido dentro de un elemento en bloque, normalmente un div, y posteriormente colocarle a dicho div la imagen que queramos a modo de background.

Esta técnica tiene algunos problemas, algunos más importantes que otros, pero en cuestión de accesibilidad los dos más importantes son dos. El primero es que los lectores de pantalla no leerán el texto, ya que lo hemos ocultado mediante display:none;, y la mayoría de lectores obvian los elementos ocultados de esta manera. El segundo, y no menos importante, es que en escenarios donde el navegador tenga activado el soporte CSS, pero desactivado el soporte para las imágenes, (o que por cualquier motivo la imagen no se haya podido cargar), no se mostrará nada, ya que el texto está oculto totalmente mediante CSS.

Aparte de esta técnica existen otras muchas, (Dave Shea hizo un gran resumen de ellas), cada cual con sus ventajas y sus beneficios, aunque la mayoría de ellas fallan en lo mismo que lo último que hemos comentado sobre FIR, cuando la imagen no se carga, el texto no puede verse.

Es por esto que, según mi modesta opinión, la mejor forma de conseguir un reemplazo de textos por imágenes de manera accesible es jugando con el posicionamiento de los elementos, y luego colocar un orden de aparición correcto mediante z-index. Esto que puede sonar un tanto confuso en realidad no lo es tanto. Veamos cómo conseguirlo.

Comenzaremos por el marcado XHTML. Para poder usar esta técnica vamos a necesitar tres elementos, (esto nos obligará muchas veces a tener que usar un span "extra" muy poco elegante, pero es el precio que hay que pagar). En nuestro caso vamos a usar un párrafo, un enlace, y el feo span:

<p class="reemplazado">
	<a href="#" title="Enlace de ejemplo"><span>¡Voy a ser sustituido!</span></a>
</p>

Para conseguir el reemplazo vamos a tener que jugar con el posicionamiento, tanto relativo como absoluto, de alguno de nuestros elementos. Lo primero que vamos a hacer es precisamente eso, posicionar y colocar nuestra imagen. Para ello vamos a colocar lo siguiente a nuestros elementos:

p.reemplazado {
	position: relative;
}

p.reemplazado a {
	background: url(imagen.png) no-repeat 0 0;
	display: block;
	height: 200px;
	width: 200px;
}

p.reemplazado a span {
	position: absolute;
}

Lo que hemos hecho ha sido lo siguiente. Primero hemos posicionado nuestro párrafo de manera relativa, lo que significa que vamos a poder posicionar sus elementos hijos, (en este caso el enlace), de forma absoluta pero desde la posición del párrafo y no de la ventana. Suena un poco complicado, ¿verdad? Para entender mejor las propiedades de posicionamiento de CSS recomiendo leer este tutorial de BarelyFitz Design.

Lo siguiente que hemos hecho ha sido colocar la imagen en nuestro enlace. Nuestra imagen tiene 200 pixels de alto y 200 de ancho, por lo que le hemos especificado esas medidas al enlace, y para que tengan efecto lo hemos transformado en un elemento en bloque, ya que por defecto los enlaces son elementos en línea. Una vez hecho esto solo nos queda colocar la imagen de fondo en nuestro enlace con la propiedad background.

Ahora le toca el turno a nuestro feo span. A este lo que le hemos hecho es simplemente posicionarlo de forma absoluta con position:absolute;. La posición top y left vamos a dejarla intacta, aunque podríamos modificarla al gusto siempre que no hagamos que se salga de las medidas de nuestra imagen.

Si probamos esto veremos como la imagen esta colocada perfectamente, y nuestro texto esta situado por encima de la imagen... Mmmm, un momento, ¡esto no es lo que queríamos! ¡Me han timado! A ver, veamos, ¿qué puede estar ocurriendo? ¡Ah, ya veo, falta el "toque mágico"!

p.reemplazado {
	position: relative;
	z-index: 1;
}

p.reemplazado a {
	background: url(imagen.png) no-repeat 0 0;
	display: block;
	height: 200px;
	width: 200px;
}

p.reemplazado a span {
	position: absolute;
	z-index: -1;
}

Ahí está lo importante del asunto, usar los z-index para determinar el orden de visualización de los elementos posicionados. Con esto lo que hemos hecho es decir que nuestro feo span con el texto quede por detrás del párrafo, y consecuentemente de la imagen que hemos usado.

Por último cabría recordar que podemos, (o debemos, según se mire), estilizar el texto del enlace, para que, dado el caso, se muestre de una manera agradable a aquellos usuarios que no puedan ver la imagen.

A mi modo de ver esta es la mejor forma de conseguir un reemplazo de textos por imágenes, aunque usemos un span tan poco elegante. Es una manera sencilla y accesible de conseguirlo, aunque bien es cierto que no es válida para todas las circunstancias, pero bueno, hay muchas técnicas estupendas por ahí, y si no para eso están los expertos, para conseguir técnicas nuevas.