reemplazo de texto con imágenes ¿si? ¿no? ¿qué técnica usar?
El otro dÃa surgió una conversación muy interesante entre algunos de la oficina y ramón (que vino a visitarnos) sobre el reemplazado de texto con imágenes, qué técnica usar e incluso si se debe usar o no.
Si decidiésemos usar el reemplazado discutimos sobre varias técnicas de las cuales las que mejor nos parecÃan eran estas dos:
- span adicional: con este método lo que hacemos es poner el texto en un span dentro del encabezado, que luego ocultamos con CSS. La imagen con el rótulo que queremos mostrar se da como background al encabezado, de forma que sea visible al ocultar el span.
inconveniente: usuarios con lectores de pantalla o que naveguen con CSS activado pero las imágenes desactivadas, no verán ni la imagen ni el texto.
- text-indent negativo: con este método lo que hacemos es ocultar el texto aplicándole un text-indent negativo muy alto. Asà el texto se desplaza fuera de la caja y permite ver la imagen con el rótulo.
inconveniente: usuarios que naveguen con CSS activado pero las imágenes desactivadas, no verán ni la imagen ni el texto.
Llegamos a la conclusión de que la mejor opción era la del span adicional porque, aunque ninguna de ellas es totalmente accesible, es la situación que con menos probabilidad podemos encontrarnos. Si además hacemos una css especÃfica para dispositivos móviles (que son los que habitualmente pueden tener css activado pero imágenes desactivadas) cubrimos prácticamente cualquier posibilidad.
Pero vamos un poco más allá, ¿usamos reemplazado de imágenes o es mejor poner directamente las imágenes en el html?, ya sé que esto puede sonar fatal pero tiene su lógica.
Por una parte poniendo las imágenes directamente en el html te aseguras de que si alguien tiene las imágenes desactivadas va a seguir viendo el contenido, porque se mostrará el atributo alt en lugar de la imagen.
Esta claro que poniendo las imágenes en el html no se separa presentación de contenido, pero ¿realmente siempre merece la pena reemplazar las imágenes? ahora entramos en la siguiente discusión :)
Qué es contenido y qué es presentación, hay en cosas en las que está claro, las opciones de un menú evidentemente son contenido y tiene que ser totalmente independiente de su presentación, pero, por ejemplo, el logo de una empresa ¿es presentación? ¿sólo presentación? porque posiblemente en muchos casos un logo aporte más contenido que un texto con el nombre de la empresa….
Y tu dirás, ¿por qué te cuento todo esto?, porque quiero saber tu opinión…
El problema que me he encontrado es que, JAWS (al menos mi versión) y otros lectores de pantalla no aceptan que se esconda con un método display:none; lo cual en cierta forma, me evita llenar la página de span. La del texto negativo se puede controlar más, por ejemplo, usando hacks o cargadores dependiendo el tipo de agente de usuario.
mini-d - 21/09/06 (1:51 pm)
1 - sobre las técnicas
Con un span adicional (vacÃo), que incluye la imagen vÃa css y tapa el texto, se puede tener una versión accesible tanto para csssÃ/imgno como para cssno/imgsÃ. Lo explicó Meyer en Revised Image Replacement (último ejemplo).
Probablemente dé avisos o no valide un span vacÃo, pero a mà eso me da igual.
2 - debate filosófico
Tratándose de texto texto (opciones de menú y tal), yo creo que sigue valiendo hacer el reemplazo, te permite tener el contenido accesible desde diferentes plataformas/escenarios de una manera relativamente sencilla.
Luego hay otros casos en los que además es bueno tener un marcado estándar (no llamadas a imágenes para texto) para poder cambiar facilmente el aspecto. Hasta hace poco esto era una cosa para vender css, pero ahora parece ya que por todas partes hay skins y personalizaciones. Desde luego, para mà un logo es IMG como una casa.
Esto… cómo era esa palabra tan de moda en usabilidad…? Ah sÃ: depende.
alberto - 21/09/06 (3:37 pm)
alberto: me parece que la solución que tú dices es verdad que es más accesible pero menos semántica.
No es una cuestión de que valide o no, si no de que ya que metes una etiqueta de más al menos que no esté vacÃa no?
La opción de meter el texto dentro del span es semántica y accesible.
Supongo, que como tú dices, depende…
maria - 21/09/06 (6:43 pm)
A mà me gusta más lo del span. Lo del margen negativo, asà “desde fuera”, me parece un poco aberrante =:-P
Lo de las imágenes también estoy bastante de acuerdo con que deben formar parte del HTML sólo si semanticamente eso “concuerda”. El “efecto esquina doblada” -> siempre en el CSS. La foto que acompaña al texto -> siempre en el HTML. Con los casos lÃmite y zonas grises que dan salsa a la vida…
Sergio - 21/09/06 (6:57 pm)
La opción de usar un SPAN vacio se puede variar un poco y añadir este SPAN mediante javascript de forma que el código del documento permanece limpio.
Si el agente de usuario no implementa javascript la pérdida será poca ya que se leerá el texto.
Con Firefox, Opera, Safari, Konqueror…puedes generar esta caja mediante :after o :before y la propiedad content: url(); Mucho más limpio. Para IE habria que hacer lo anterior.
are - 26/09/06 (3:41 pm)
Yo estoy de acuerdo con are, y además no me gustan ninguna de las otras opciones que mencionáis para hacer el reemplazo. En el momento en que se provoca un problema de accesibilidad a ese contenido me parece que la técnica en cuestión deberÃa pasar a la retaguardia.
En la técnica que comentaba are, el marcado html queda intacto, inyectándose la imagen mediante la pseudoclase :after desde la CSS, lo que además tiene su sentido en cuanto a la separación presentación/contenido. Como IE no tiene implementación para :after, hacemos uso de la posibilidad de ejecutar código js desde las CSS en una hoja de estilos sólo para IE, y generamos el spam que proponÃais meter directamente al código.
De esta forma, no se pierde la accesibilidad del contenido, perdiendo únicamente su usabilidad al no poder escalar el texto ni seleccionarlo :( Pero bueno, ninguna técnica es perfecta, y esta me parece la mejor.
Respecto a si un logo es presentación o contenido… pienso que depende del logo. Muchos logos mal diseñados no significan absolutamente nada, sino que son meros adornos al nombre. En otros logos el diseño sà tiene significado, transmite información, y creo que esa es la clave. Ese tipo de logos yo lo pondrÃa como un img.
Pero bueno, tampoco hagáis mucho caso a lo que dice ese tal Ramón, eh? me han dicho que en la intimidad maqueta con tablas… xD
ricardo - 26/09/06 (4:15 pm)
jaja, donde digo Digo digo Diego, y donde digo spam querÃa decir span :D .Lo siento.
ricardo - 26/09/06 (4:28 pm)
aqui teneis un buen articulo que trata el mismo tema http://armonia.spiral-static.org/?2006/06/14/142-css-crib-sheet-de-dave-shea
Suvi - 02/02/07 (10:42 am)
me equivoque de articulo es este: http://armonia.spiral-static.org/?2006/04/19/135-reemplazo-accesible-de-textos-por-imagenes
Suvi - 02/02/07 (10:49 am)