viernes, 4 de marzo de 2011

Sobre el atributo alt y title, ¿cumplen la misma función?

Me escribe una alumna de la asignatura Experiencia de usuario del Curso de especialista en diseño web:
Estoy mirando varias páginas para la actividad voluntaria de accesibilidad web, pero me están surgiendo algunas dudas con las etiquetas. Por ejemplo, después de leer los apuntes me ha quedado claro que cuando se pone una imagen, se debe incluir la etiqueta (alt=" "),  sin embargo, estoy viendo una web en la que aparece de la siguiente forma:

<div id="Clogo">
<img alt="Escudo Institucional" src="images/logo.jpg" title="Escudo Institucional" />

En este caso concreto, ¿la etiqueta (title= " ") cumple la misma función?
La alumna no me ha dicho en su mensaje dónde ha encontrado este ejemplo,  pero uno que es "perro viejo" lo ha encontrado fácilmente: se trata de la web oficial de la Junta de Extremadura.

La respuesta es NO, no cumple la misma función. Si leemos la recomendación del W3C sobre HTML podemos sacar las siguientes conclusiones:

  • El atributo alt se emplea como representación alternativa, es decir, como sustituto de la imagen. Por ejemplo, cuando se decide no cargar las imágenes de una página (por ejemplo, porque la conexión a Internet es lenta o nos cobran mucho dinero por ello, como puede ser desde un teléfono) o cuando alguien no puede ver las imágenes (por ejemplo, un ciego). Este atributo es obligatorio.
  • El atributo title se emplea para proporcionar información adicional, no para proporcionar información que sustituya al elemento al que se aplica (en este caso a una imagen). Por ejemplo, se puede emplear para indicar el autor de una fotografía, la fecha de realización de una fotografía o el origen de una imagen, pero siempre como información complementaria. Este atributo es opcional.
Por tanto, en este caso concreto, está mal utilizado el atributo title. Se emplea para proporcionar exactamente la misma información que con el atributo alt, lo cual, más que ayudar, es una barrera (a nadie le gusta leer o escuchar dos veces lo mismo). Si vemos el código de la página de la Junta de Extremadura, comprobaremos que esta forma de actuar se repite en más sitios.

Esta página es el típico caso de accesibilidad web mal entendida: el desarrollador de la página lee alguna guía, lee algún artículo, consulta algún ejemplo, pero en realidad no entiende lo que está haciendo, simplemente lo repite como un loro.

La guinda de esta página web la podemos encontrar en su pie. Por un lado, podemos encontrar el mensaje "Resolución Óptima 1024x768 px.", que ya comenté un caso parecido hace unos días en Tonterías, las justas. Por otro lado, podemos encontrar las medallas de "XHTML 1.0" válido (pero no es así, a mí me han salido 3 errores de validación) y "WAI-AA" (hay algunas cosas básicas que se deberían corregir, como esta del atributo title).


[Actualización 04/03/2011]
En realidad, en este ejemplo, la imagen en cuestión sólo realiza una función decorativa, por lo que lo mejor, lo más accesible es emplear un texto alternativo nulo (simplemente alt=""), y por supuesto, no utilizar el atributo title.

14 comentarios:

Alberto dijo...

Y si nos encontramos con una imagen dentro de un enlace? Entonces nos encontramos con el title del enlace, el alt de la imagen y el title de la imagen, ¿hay que rellenarlo todo? No quedaría quizas muy repetitivo?

Mario dijo...

Tengo una pagina con mas de mil imagenes con sus respectivos title y alt. estas imagenes ayudaran en el posicionamiento de mi pagina?..

Sergio Luján Mora dijo...

Claro, los buscadores asocian el texto alternativo con las imágenes y es más fácil que te encuentren.

Mike dijo...

Hola. Me gustó su página. Muy clara. Pregunto: ¿Cómo montar una imagen con texto en vez de solo un texto? He visto en algunos sitios que en vez de solo una explicación textual (como la que se añade con ) aparece una imagen y un texto. It pops uo just like that! Muy bonito. ¿Sabe usted cómo hacerlo? He buscado por todas partes sin encontrar nada al respecto. Sería fantástico que usted incluyera esa interesante función. Gracias.

Sergio Luján Mora dijo...

Hola Mike. Lo siento, pero no entiendo bien tu pregunta, ¿me podrías poner un enlace a un ejemplo concreto o explicarlo con otras palabras?

Anónimo dijo...

Ya me pongo a arreglar mis imágenes, están todas con ese error!!!
Gracias!

Gleiner Teruel Crivelini dijo...

Hola, Sergio. Me gustó mucho el sitio. Su propuesta para explicar las cosas con un enfoque objetivo sobre definiciones técnicas de ellos es lo que nos acerca donamos utilizamos los recursos de forma segura.
He tenido grandes dificultades en la comprensión y aplicación de los recursos para la producción de imágenes de la sombra. ¿Podría ayudarme a entender el funcionamiento de los atributos que se aplican a la misma, por favor?
Gracias.
Gleiner.

Sergio Luján Mora dijo...

Hola Gleiner.

¿Qué son las "imágenes de la sombra"? Es un término que no conozco.

Un saludo.

Anónimo dijo...

Esto no es totalmente así, el atributo alt es el único que admite el navegador IE hasta su versión 8, sin embargo el atributo title es el que admite los navegadores basados en la W3C. De ahí que se suelen usar los dos, para la accesibilidad desde las diferentes versiones de navegadores.

Sergio Luján Mora dijo...

Anónimo, esto es así, consulta la especificación del W3C. Lo que haga el Internet Explorer, normalmente mal, es su problema y no debe condicionar a los desarrolladores.

Salud dijo...

Pues me ha quedado mucho más claro el tema del alt y title aunque ya los había visto en algunos vídeos tuyos cuando estuve estudiando para un examen de desarrollo de interfaces webs.

La pregunta del millón porque usas title en tu foto en lugar de alt (y utilizas un alt vacío en este caso sin =""), desde mi punto de vista lo veo mucho mejor así porque cuando paso por encima de tu foto me sale tu nombre y se quién eres... pero de cara a la accesibilidad, un ciego por ejemplo no tendría su alt (podría leer el title en el 100% de los casos) se considera decorativa esa imagen? quizás debiera ponerse alt="foto del autor Sergio Luján Mora".

Un lío muy grande tengo jajaja, quiero conseguir que mi red de webs sea AAA.

Sergio Luján Mora dijo...

Hola Salud.

La foto la pone automáticamente Blogger, yo no tengo control sobre muchas cosas que ocurren en este blog... una razón más para huir de los gestores de contenidos :-)

De todos modos, no es un problema porque existe un enlace textual (mi nombre) que conduce al mismo destino que la foto: existe una alternativa, el enlace de la foto no es esencial (si eliminas la foto, se puede llegar al mismo destino a través del otro enlace).

Un saludo.

Joselo Bermeo dijo...

Saludos muy interesante su blog muy educativo sobre la accesibilidad web, me gustaría saber como puedo usar el atributo "alt" de una imagen para poder describirla en voz. Tal vez con algún javascript jquery o alguna librería.
Mil Gracias por su ayuda

Sergio Sendra dijo...

¡Muchas gracias por tu post! Me sirvió para aclarar las funciones y poder usarlo correctamente en mi PFC.