Atributos ALT y TITLE, no te olvides de ellos

Autor: DemaKi_na 16-11-2010

Atributos ALT y TITLE, no te olvides de ellos Vamos a tratar un tema de profunda relevancia tanto para la accesibilidad Web como para la optimización de nuestro código: la diferencia entre los atributos ALT y TITLE los cuales podemos aplicar tanto a imágenes como a enlaces, aplicables a enlaces o imágenes, y con algún ejemplo de su uso.

Primero una descripción de su cometido …

  • TITLE – Como atributo se puede utilizar tanto en imágenes como en enlaces, y es la encargada de ofrecer una descripción (tooltip) de la imagen o enlace y funciona en todos los navegadores.
  • ALT - Con él definimos un texto alternativo para imágenes, que se muestra cuando la imagen no está disponible y para garantizar su accesibilidad. Es una etiqueta obligatoria en las imágenes, si no fuese necesario incluir ningún texto descriptivo (en imágenes que no aportan nada al contenido) pon pondríamos cualquier texto como alt=”nogo”. También funciona como tooltip en Internet Explorer, no así por ejemplo en Mozilla Fifefox.

Veamos como aplicar un TITLE a un enlace:

<a title="Ir al sitio, Mi sitio" href="http://misitio/">Ver mi sitio </a>

Y lo que veríamos sería un texto, enlazado a una URL y que al colocar el cursor del ratón sobre el enlace nos mostraría el tooltip:

Mi sitio,“Haz clic aquí para ir al sitio”

En cuanto al uso de ALT y TITLE en imágenes los resultados serán distintos, como hemos dicho antes, dependiendo del navegador que utilicemos. No obstante, ALT será siempre obligatorio mientras que el uso de TITLE sería opcional aunque necesario para cumplir los estándares del W3C, solo útil para añadir información adicional.

Por ejemplo:

<img   title="Logo" src="http://desieteados.xtreemhost.com/wp-content/uploads/2010/07/patim-25-aniv.jpg" alt="Logo  de la Entidad" />

Logo  de la Entidad

Nos mostratía como texto altrnativo “Logo de la Entidad” y como tooltip “Logo

El atributo ALT es el que nos serviría en caso de no mostrarse la imágen, y TITLE solo como información adicional, al pasar el cursor sobre ella. Es decir, si usáramos una imagen no existente veríamos el texto alternativo, definido por ALT, como en este ejemplo:

Logo de la Entidad

que, al ser una imagen inexistente o que no carga solo veríamos el texto de nuestro ALT…….”Logo de la Entidad”.

Como hemos visto, este atributo es muy útil para la accesibilidad de nuestro sitio web, imagina que una persona ciega visita tu web y para ello usa un navegador que convierte el texto a voz y al tratar de leer la imagen no va a leer nada ya que si no tiene el atributo ALT el navegador no sabrá interpretar la imagen.

El atributo ALT está pensado para usar descripciones cortas, si lo que deseas es usar descripciones un poco más largas existe otro atributo que es longdesc que este atributo debe contener dentro una URL a la descripción de la imagen, ejemplo:

<img  src="arboles.jpg" alt="Árboles en otoño" longdesc="descripcion-larga-de-la-imagen.html"/>

Aquí el Agente de Ususario (navegador) leería como texto alternativo “Árboles en otoño”,mientras que “descripcion-larga-de-la-imagen.html” sería un documento HTML externo con una descripción más larga de la imágen.

Bueno espero que tras esta disertación nos quede claro el asunto: Ni un en lace sin TITLE, ni una imagen sin ALT. Nos vemos en Ronal Mcdonal.

871 comentarios