Iconos como enlaces: problemas y soluciones
2 de Octubre 2008
Los iconos como enlaces en páginas web pueden ofrecer algunas ventajas. Dependiendo de las características del icono y del perfil del usuario, pueden ser asociados rapidamente con la acción o elemento que representan, además de ayudar a aprovechar espacios en pantalla o concentrar en un área una serie de elementos relacionados entre sí para que puedan ser localizados visualmente con facilidad. Un ejemplo de esto último podriá ser un grupo de acciones relacionadas con el documento como “enviar por correo” o “imprimir”.
Sin embargo, a la hora de codificarlos intentando ofrecer una solución accesible para todo tipo de usuarios, presentan algún que otro problema.
Icono como imagen de fondo con CSS.
Ante una imagen con rollover, podemos sentir la tentación de recurrir a la solución más sencilla, que es hacerlo con CSS. Dentro del elemento <a> colocaríamos un texto invisible en pantalla mediante un indentado negativo de manera que pueda ser leído por lectores de pantalla. Recuerdo que otras técnicas para ocultar elementos en pantalla como el display: none o visibility: hidden, suelen ocultar también esos elementos para la mayoría de lectores de pantalla.
Esta solución presenta un problema, y es que si por alguna razón la imagen de fondo vinculada en la CSS no se carga, la gran mayoría de usuarios, es decir, aquellos que no usan un lector de pantalla, se quedan sin texto alternativo en su lugar ni la posibilidad de encontrar facilmente el atributo title de estos enlaces, suponiendo que se ha usado, ya que en lugar del icono, queda simplemente un hueco vacío sobre el que difícilmente se puede hacer rollover en busca del tooltip aclaratorio.
Todavía nos queda la oportunidad de encontrar el atributo title del enlace mediante teclado, cosa que es bastante difícil ya que en la mayoría de navegadores es dependiente de dispositivo y sólo Firefox ofrece la posibilidad de acceder a él usando la combinación de teclas Mayúsculas + F10 + P. Aun así, es un atajo de teclado bastante desconocido para los que normalmente no usan el teclado para navegar y sólo ejecutable sobre enlaces y otros elementos focalizables. No podríamos acceder mediante teclado al atributo title de una imagen ni al de un acrónimo o abreviación.
Internet Explorer, navegador mayoritario, no ofrece esta posibilidad.
Icono como elemento <img>
En este caso incluiríamos la imagen en el código HTML con su correspondiente atributo alt y haríamos el rollover con javascript. Hay que tener en cuenta que la imagen de sustitución debe tener el mismo texto alternativo que la original. En caso de que la imagen no se cargue, el atributo alt del icono enlazado nos mostrará la información necesaria como texto.
La “necesidad” de usar un title y el supuesto problema de la información redundante.
En ambos casos es recomendable el uso del atributo title del enlace para aclarar su función. ¿Por qué? Simplemente, es posible que la imagen no sea suficientemente clara de por sí, que nuestro icono se encuentre con un usuario novato en Internet que no conozca ciertas convenciones o no sea capaz de asociar la imagen a una determinada acción, o incluso que la información transmitida se base sólo en el color. Por ejemplo, en un monitor monocromo podríamos tener problemas para identificar el icono correspondiente a un idioma según los colores de la bandera del país.
Internet Explorer muestra erroneamente el atributo alt como un tooltip, por lo que la carencia de title no resultaría un problema para sus usuarios, sin embargo, navegadores como Firefox, Opera o Safari sólo muestran como tooltip el atributo title. Para estos usuarios, es conveniente y aconsejable el uso del atributo title en ausencia de contenido textual que describa claramente el propósito del enlace.
Pero ¿qué pasa con lectores de pantalla? Aquí es donde surge el miedo a la información redundante expresada en el atributo title y en el atributo alt.
El atributo title ha pasado de ser usado en exceso, en unos casos con supuestos fines de accesibilidad y en otros con fines de posicionamiento en buscadores, a ser despreciado y evitado al máximo, y es que es cierto que es un elemento prescindible en la mayoría de ocasiones, dependiente de dispositivo y problemático en magnificadores o lectores de pantalla, según su configuración.
Jakob Nielsen, en su alertbox de enero de 1998 comenzaba a fomentar la mala práctica de abusar del title con una afirmación no del todo cierta:
[..] auditory browsers will read the text aloud and not display it visually. Different browsers will display link titles in very different ways.
Al contrario de lo que comentaba, la mayoría de lectores de pantalla no lee el atributo title por defecto. En esta ocasión, al revés de lo que ocurriría con acrónimos y abreviaciones, esto puede parecer un alivio, sin embargo, suponer que los usuarios de lectores de pantalla usarán la configuración por defecto es suponer demasiado. No podemos saber con qué combinación nos vamos a encontrar, aunque siendo positivos, es bastante probable, como ocurre con cualquier otro programa, que el usuario no cambie su configuración.
El uso incorrecto y excesivo del atributo title con fines de posicionamiento en buscadores, también ha podido desalentar a los usuarios de lectores de pantalla de configurar sus programas para leer títulos, aunque también el uso de malos text link como “click aquí” ha podido ser una razón para lo contrario, suponiendo también que la carencia de un texto de enlace suficientemente aclaratorio siempre se compense con un buen title. Demasiadas suposiciones.
Tenemos el riesgo por tanto, de que los usuarios de lectores de pantalla tengan que escuchar title del enlace y alt de la imagen repetidos. De todas formas, en mi opinión, es un mal menor y un hecho que no va a presentarse mayoritariamente en los enlaces de una página, por lo que optaría en este caso, por usar los dos atributos consciente de que no es una solución perfecta para todos los usuarios pero tampoco tan perjudicial como se suele creer.
Lo ideal sería que este tipo de iconos siempre fuera acompañado de un texto, o mejor dicho, que el icono complementara al texto sin prescindir de él. En este caso no cabe duda: el icono pasa a ser un elemento decorativo y prescindible que se puede incluir como imagen de fondo mediante CSS.
Fuentes / Más información:
Sobre esta entrada
Archivado en Accesibilidad, Usabilidad
3 comentarios a “Iconos como enlaces: problemas y soluciones”
Mario Pérez, el Octubre 2nd, 2008:
Totalmente de acuerdo en lo que al title se refiere, incluso, si hemos hecho las cosas medio bien y no hemos capado el outline, siempre se podrá llegar a “ver” dónde está el enlace navegando mediante el tabulador.
De todos modos discrepo en lo de volver a javascript para hacer rollovers. Y es que sería un poco “raruno” que no se cargue la imagen del css y sí la información de estilos que manda el texto fuera, no?
Un saludete
admin, el Octubre 2nd, 2008:
Hola Mario.
Quitando la posibilidad rebuscada de que algún usuario vaya por ahí navegando sin descargar imágenes, te aseguro que no es tan raro que una imagen acabe desapareciendo cuando hay mucha gente tocando las… “cosas”. Desde una ruta mal puesta, una “inofensiva” mayúscula, etc.
Saludos.
Rollover de imágenes en HTML (elemento IMG) sin Javascript, el Noviembre 19th, 2008:
[...] que podemos hacerlo de manera mucho más fácil y limpia con CSS, pero para los casos en los que, por la razón que sea, sea necesario que la imagen del rollover esté como elemento <img> en el código HTML, [...]