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.
