Me estoy empezando a plantear si el CSS Zen Garden, en su “camino hacia la luz” nos enseñó una mala práctica con css como las que en su día se hicieron con html.

Nos enseñaron el uso y abuso del reemplazo de texto por imagen. Qué bonito, accesible, semántico y amigable a buscadores. ¿Seguro?

Todas las técnicas de reemplazo de imágenes tienen algún problema de accesibilidad o bien obligan a añadir código carente de significado e inoportuno, cuando html dispone del elemento <img> que tanto hemos menospreciado y que en muchos casos, es el más adecuado.

Las imágenes deben estar en el css como imágenes de fondo cuando no transmiten ningún significado, cuando son meros elementos decorativos. Otras imágenes, como por ejemplo logotipos, no tienen por qué ser siempre reemplazadas por texto. Un logotipo ya tiene significado de por sí, y normalmente suele contener el nombre de la empresa a la que representa. Este tipo de imágenes transmiten una información, y teniendo en cuenta que las imágenes tienen un atributo alt para mostrar el texto alternativo en caso de que no se carguen y el atributo title, ¿qué tiene de malo el incluirlas en el código?, ¿presentan algún problema de accesibilidad?

Incluso podemos darles “el peso” que tienen dentro del documento encerrándolas dentro de un <h1> o <h2>, como muestra el siguiente código:

<h1 id="logo">
<img alt="The World Wide Web Consortium (W3C)"
src="/Icons/w3c_main" />
</h1>

¿Cuándo debemos entonces usar el reemplazo de texto por imágenes?
Cuando tenemos que mostrar un texto de encabezado con una fuente que no es de sistema, siempre que ese encabezado no sea un logotipo.

Una regla sencilla:

¿Reemplazo de texto por imágenes?
Sí, con moderación.
¿Reemplazo de imágenes por texto?
No. Si una imagen puede ser reemplazada por texto es porque transmite una información y por lo tanto, puede estar en el html.