Soy césar, aka @inquiettudes, diseñador de interacción freelance trabajando para mejorar la experiencia de usuario de la realción de las personas y los objetos. Puedes saber un poco más de mi en facebook, twitter y linkedin. Me encanta el diseño de interacción, la construcción de sitios web y las redes sociales. Pero lo que realmente me motiva es la solución de problemas y las relaciones entre los usuarios. De la manera mas sencilla. Así de fácil.

Usabilidad, diseño centrado en el usuario, arquitectura de la información & servicios diseño de interacción

El blog de inquiettudes

¿Cómo reemplazamos textos por imágenes?

¿Tienes algo que añadir?

Esta pregunta me ha surgido estos primeros días del año. Andaba yo maquetando mi primer proyecto de este 2007, cuando me asaltó la duda... ¿cuál era la mejor fórmula? La mas correcta semánticamente, la más accesible... así que me puse a leer y a comentar con compañeros de profesión. Y aquí las conclusiones...

Publicado hace mas o menos 10 años por @inquiettudes.

¿Para qué lo utilizamos?

En muchas ocasiones las limitaciones en el uso y opciones tipográficas de la Web hacen que por motivos de diseño necesitemos sustituir un título por una imagen. A partir de aquí siempre surge la duda de si esa imagen es presentación o contenido. Si lo consideramos contenido, la discusión está terminada. Ponemos la imagen directamente en el código mediante la etiqueta <img />.

¿Dónde está el problema?

El problema lo encontramos si lo consideramos como presentación. En este caso necesitamos de alguna técnica. Descartando, por motivos de accesibilidad, las que utilicen JavaScript o Flash.

Técnicas

La que siempre he utilizado es la conocida FIR. Esta técnica consiste en ocultar mediante CSS un elemento span contenido dentro del bloque y colocar una imagen de fondo para bloque.

Veamos un ejemplo

<!-- XHTML -->
<h1><a href=”#”><span> ¿Por qué maquetar con CSS?</span></a></h1>

/* css */
h1 a { width: 300px; height: 174px; background: url(maquetar-con-css.gif) no-repeat; display: block; color: #033D6E; }
h1 a span { display: none; }

En este caso estamos utilizando la técnica FIR, mira el ejemplo.

Inconvenientes

Accesibilidad. El texto no es leído por los lectores de pantalla, por estar oculto. Esto se podría solucionar mediante el uso de hojas de estilo independientes para cada dispositivo. Así, si se navega mediante lectores de pantalla, cargamos otra hoja de estilos y solucionado.

El problema que realmente tiene es…

¿Y si navegamos con las imágenes desactivadas?

En este caso el navegador no muestra nada, desactiva las imágenes de tu navegador y mira el ejemplo ahora.

Entonces… ¿Qué hacemos?

Bueno pues después de compartir con mis compañeros, de buscar y de leer, llegamos a la conclusión de que la mejor manera era jugar a posicionar los elementos uno sobre otro

/* css */
h1 { width: 300px; position: relative; z-index: 1; }
h1 a { width: 300px; height: 174px; background: url(maquetar-con-css.gif) no-repeat; display: block; color: #033D6E; }
h1 a span { position: absolute; z-index: -1; }

¿Que tal ahora? ¿Mejor?, mira este ejemplo ahora

Lo que estamos haciendo con esta técnica es ocultar bajo la imagen el texto del titular, siempre que la imagen no sea transparente, así para un usuario que navegue con imágenes activadas no apreciará que bajo la imagen hay texto. Sin embargo un usuario que tenga desactivadas las imágenes podrá ver el texto. Y si, además, damos formato a este texto podrá hasta verlo de una manera similar.

Ya se ha hablado de esto…

Estas y otras técnicas las encontrareis mejor explicadas en estos sitios

Y, más…

Publicado hace mas o menos 10 años por @inquiettudes en las categorías Accesibilidad, CSS, Estándares.

Etiquetado cómo , , . Si quieres estar al dí de lo que pasa en el post suscríbete a los comentarios.

¿Tienes algo que decir?

Deja tu comentario seguro que es muy interesante. Por favor guarda la temática del post para mantener un debate agradable. No uses este formulario como SPAM. Añade tu comentario a continuación, tambié puedes crear un trackback desde tu sitio. Suscríbete a los comentarios de este post.

Mi último tweet

cosas que están pasado durante este 2016

Hecho con mucho cariño entre ciudad real y madrid