Atributo ALT e imágenes

Para que una página sea etiquetada como correctamente accesible, es necesario que todas las imágenes que incluya tengan algún valor en el atributo alt, aunque este valor esté vacío. La normativa XHTML DTD requiere sólo dos atributos para el elemento img: scr y alt. WCAG nos especifica un poco más sobre lo que debemos incluir. Desafortunadamente, las especificaciones de la W3C son son comprensibles a menudo.

He recopilado información en internet que pretende ayudarme un poco a entender como manejar el atributo alt aplicado a la accesibilidad.

La primera Section 508 guidelines indica: «debe proporcionarse una equivalencia textual para cada elemento no-texto (por ejemplo, mediante el uso de alt, longdesc o en el contenido del elemento. El punto 1.1, la primera prioridad de la prioridad 1 de las WCAG guidelines dice lo mismo. Esto incluye imágenes, representaciones gráficas de texto (incluyendo símbolos), regiones de mapa de imágenes, animaciones, applets…

Vamos a ver cómo se come esto aplicándolo a:

• Imágenes decorativas
• Iconos
• Botones, navegación y otras imágenes con texto
• Imágenes que enlazan a algún sitio
• Imágenes complejas y detalladas cuya descripción sobrepasa las 1000 palabras
• Otras imágenes

Imágenes decorativas

En imágenes decorativas incluimos imágenes de fondo, bolos, <hr />, imágenes espaciadoras, etc. Este tipo de imágenes hacen que la página se amás bonita, aunque realmente no aportan contenido alguno. El atributo alt para ellas podría estar vacío. <img src=»path/image.gif» alt=»» />.

Un par de notas al respecto:

• Ya que lo correcto es separar la capa de contenido de la capa de presentación, no es muy correcto el uso de imágenes de fondo en nuestro contenido XHTML. Es más correcto usar CSS.
• Si usamos un atributo alt vacío, los lectores de pantalla saltarán literamente sobre la imagen. Pero si no lo incluimos, el lector leerá la url de la imagen completa. Puedes imaginar una voz de robot diciendo «spacer gif spacer gif…» sin parar?

Iconos

El atributo alt de un icono debe describir la intención o cometido del icono. Ya que un icono puede tener diferentes significados dependiendo del contexto, lo correcto es describir el cometido, y no el icono, ya que alguien que no conozca el icono podría no entenderlo si nuestra descripción se reduce a decir visualmente cómo es. Por ejemplo, no es correcto describir el icono diciendo «una fecla verde hacia la izquierda». Sería mejor decir «página atrás».

icon	possible relevant values for alt	useless alt
	«correcto», «abrir», «comenzar», «completado», «»	Círculo con un check mark
	«stop», «mal», «borrar», «cerrar ventana», «», «eliminar módulo», «borrar email»	Cruz roja
	«RSS Feed», «añadir RSS feed al lector, «»	Cuadrado naranja con 3 líneas
	«respuesta», «intruduzca password», «», «clave primaria», «seguridad», «»	llave dorada
	«seguridad», «bloqueado», «protegido»	closed lock

Como podemos observar, la descripción de la apariencia del icono en el atributo alt casi siempre no sirve de nada.

Es correcto incluir un string vacío («») como contenido del atributo alt en los iconos, sobre todo cuando un icono aparece justamente antes de la definición de la función de dicho icono. Los ejemplos más comunies son los iconos de imprimir y email.

En los casos en los que la descripción del icono esté justo antes o después del mismo, es redundante incluir valor alguno en el atributo alt. Un lector de pantalla leería «imprimir imprimir» o «enviar email enviar email».

Ejemplos de atributo alt para iconos:

Erróneos:
<a href=»inbox.html»><img src=»icon/email.gif» /> inbox</a> //falta el atributo alt

Correcto, pero no del todo bueno: el lector de pantalla leería «go to inbox inbox»
<a href=»inbox.html»><img src=»icon/email.gif» alt=»go to inbox» /> inbox</a> //atributo alt redundante

Mejor, correcto:
<a href=»inbox.html»><img src=»icon/email.gif» alt=»» /> inbox</a>

El mejor: separa contenido y presentación
<a href=»inbox.html» class-«email»>inbox</a>

con éste css

a.email { padding-left: 18px; background: tranparent url(icon/email.gif) no-repeat 0 0; }

Botones, navegación y otras imágenes con texto

Si usamos imágenes para lso elementos de navegación de nuestra barra de navegación (por ejemplo botones de «siguiente», «anterior», …) lo correcto es incluir en el atributo alt debe coincidir con el tecto que está contenido en la imagen. O sea, que si nuestra imagen dice «Siguiente», nuestro alt deberá ser «siguiente». Luego, podremos incluir una descripción más detallada en el atributo title de la etiqueta padre ANCHOR.

<a href="about/index.html" title="About the Author"><img src="img/nav_about.jpg" alt="about" /></a>.Si eres de los que usas los sistemas de navegación etiquetados como mystery meat navigation (básicamente aquellos en los que no te enteras de nada, a no ser que pases el ratón por encima de cada opción de menú), se debe describir de manera exhaustiva en el atributo alt. No se debe incluir exclusivamente la explicación de la iconografía del botón o pestaña. Esto puede ir en contra de las líneas guía estándar, pero como el uso de estos sistemas de navegación va en contra de los estándar web, al menos hacemos el sitio accesible para gente con problemas de visión (aunque sea inaccesible para gente sin problemas visuales).

En vez de usar un <img> para la navegación mejor usar texto, hacer el link atractivo incluyendo un reemplazo de imagen con CSS.

Tenemos un ejemplo aquí

<style type="text/css"> 
<-- // Hide the text in the header (which is contained in the span) 
h1#firt span { display: none; } 
h1#firt {     
height: 35px; /* height of the replacement image */     
background-image: url("hello-world.gif");     
background-repeat: no-repeat; } -->
</style> . . . 
<h1 id="firt"><span>Hello world!</span></h1>

Imágenes sin texto que enlazan a algún sitio

A veces tiene sentido incluir imágenes sin texto alguno que enlanzan con otras páginas. Por ejemplo, en Facebook y página similares, al hacer click sobre el avatar de un fulano, se abre el profile del mismo.

En este caso, el atributo alt debe describir el propósito del link

<a href="bios/jane.html"><img src="img/thmb_jane.jpg" alt="Jane Smith's profile" /></a>. 

Ésto es similar a la explicación de los iconos hecha arriba. Refiriéndonos al ejemplo anterior del icono del email, la presentación correcta sería

<a href="inbox.html"><img src="icon/email.gif" alt="go to inbox" /></a>

Imagenes complejas cuya descripción sobrepasa las 1000 palabras

Hay imágenes cuya descripción supera las 1000 palabras. Por ejemplo los gráficos, son un ejemplo de imagen necesario para comprender el significado de una página y son demasiado complejos como para describirlos en los 255 caracteres que nos permite el atributo alt.

Si la imagen está seguida por un texto que explica detalladamente el contenido de la misma, un simple valor para el atributo alt sería suficiente. Pero si hay información incluida en la imagen que no es descrita en el texto subyacente, y es demasiada información como para describirla en un par de párrafos, necesitamos un método alternativo para explicar el contenido de la misma. PAra ello usaremos el atributo longdesc describiendo con todo lujo de detalles el contenido de la imagen.

El atributo longdesc

Es un atributo opcional para las etiquetas <img> y <frame>. la propiedad longdesc especifica una url en la que se incluye una descripción detallada del contenido de la imagen o frame actual.

<img src="graph.gif" alt="graph of blood pressure by age group(long description available)" 
longdesc="supportfiles/graphdescribed.html" />

Luego hay que crear una página por separado para cada longdescriptcion. Esta página incluirá la descripción detallada y un link para volver a la página original. Por lo tanto, el propósito del atributo longdesc es proporcionar un enlace a una página diferente, en la que hay una descripción correcta disponible. Este enlace es invisible para usuarios que no tengan problemas de visión, pero estará disponible para los programas lectores de pantalla.

El atributo longdesc se usa muy poco, a pesar de que es una recomendación de la WC3 and Section 508 guidelines. Por esta razón debemos:

• Especificar en el valor del atributo alt de la imagen que hay una descripción larga disponible. Se usa tan poco, que incluso aquellas personas que usan lectores de pantalla podrían pasarla por alto. alt=»graph of blood pressure by age group(long description available)»
• En vez de usar el atributo longdesc es mejor describir el contenido de la imagen en el texto circundante. Esta información estará visible para videntes/no videntes y lo que es también importante… para los motores de búsqueda.
• Para ver cuándo es necesario, inhabilitar las imágenes, y observar si la información incluida en la imagen es presentada o mostrada en el texto de la página. Si lo es, longdesc no es necesario. Si no lo es, o bien deberemos ampliar el texto o usar longdesc
• Cuando recivimos un gráfico de datos, es mejor incluir una tabla de datos con lso datos referentes al gráfico. La mayoría de los gráficos están creados en Excel (abrir MS Excel, seleccionar «insertar» > «gráfico»). Hay que pedir a quien haya creado el gráfico el fichero original en Excel, y presentar los datos de la hoja de cálculo en una tabla. Si no tenemos acceso a la hoja de cálculo original, mal asunto.
• WebAIM proporciona más ayuda para el atributo longdesc.

Otras imágenes

Aplicable a todas las imágenes: si incluyes una foto en la que se te ve con Mickey Mouse, tu atributo alt debe poner por lo menos «Mickey Mouse y yo». Por supuesto somos libres de incluir más información, sobre todo si ésta es útil para el lector de la página.