Desarrollo frontend, estándares web, accesibilidad y más
Por kcmr, el 15 de Noviembre de 2007 en Accesibilidad
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.
Campos obligatorios marcados con asterisco *
2 comentarios
Por Pablo, el 26 de Agosto de 2009
Genial, hacía tiempo que estaba buscando esta solución y no tener que usar texo indentado, etc.
Me surge una duda ¿Los buscadores realmente le dan el mismo peso al texto de un H1 que dentro incluya texto simple Vs. un H1 con una imagen y sus respectivos alt y title?
Por ejemplo, quitandole los estilos css a un html que incluya la técnica del H1 con imagen dentro, el texto no se visualiza. Para asemejarse al H1 con texto simple ¿No estaría bien que se visualice en el tamaño jerárquico que debería? He leido varios artículos sobre el tema y esta todo muy trillado, también se ven text-indent o hidden en sitios de renombre. Muchas gracias por la ayuda, por el momento creo que esta es la mejor solución, aunque tengo mis dudas con respecto a que jerarquía le dan los buscadores al .
Por kcmr, el 26 de Agosto de 2009
Hola Pablo.
Yo cada vez estoy más convencida de que lo de que el marcado semántico beneficia al posicionamiento en buscadores es un cuento muy bonito que nos han contado, porque se ve cada cosa en Google bien posicionada que da mucho que pensar sobre la relevancia que dan realmente los buscadores a estos temas. Desde luego que es importante, no es lo mismo una página hecha con capas, css, etc, que una página con tablas, tropecientasmil líneas de código, muy pesada, que falten textos alternativos, etc. Todo influye, pero al final creo que son mucho más relevantes de cara a buscadores los factores externos (backlinks) y el title de la página como factor interno.
Lo ideal sería que fuera “bueno para todos”, pero si hay que elegir entre “bueno para humanos” o “bueno para Google”, me quedo con lo primero.
Saludos!