Escribiendo texto ALT efectivo

POR TRENTON MOSS - Especialista en Usabilidad y Accesibilidad Web. http://www.webcredible.co.uk/
TRADUCIDO POR: Sebastián Betti - Argentina. sbetti@gmail.com

Todo aquel que conoce algo sobre accesibilidad Web sabe que las imágenes necesitan tener un texto alternativo (etiqueta ALT) asociado. Esto se debe a que los lectores de pantalla no pueden interpretar las imágenes sino que en su lugar leen en voz alta el texto que éstas tienen asignado. En Internet Explorer puede verse este texto ALT con sólo posar el puntero del mouse sobre la imagen y mirar el recuadro amarillo emergente. Otros exploradores, como debe ser, no lo hacen. El código HTML para insertar texto ALT es:

Aquí va la descripción alternativa

¿Puede haber una técnica para escribir texto ALT? Simplemente se pone una descripción y listo, ¿verdad? Bien, más o menos. Si bien no se trata de algo sumamente complejo, existen algunos lineamientos a seguir…


Imágenes espaciadoras y textos ALT faltantes

Las imágenes espaciadoras siempre deberían tener texto ALT nulo, o sea alt="". De este modo la mayoría de los lectores de pantalla ignorarán completamente la imagen y ni siquiera repararán en su presencia. Las imágenes espaciadoras son esas imágenes invisibles utilizadas en casi todos los sitios Web. Su propósito es, como el nombre lo indica, generar espacio en las páginas. En ocasiones no es posible crear el efecto visual requerido, de manera que se puede insertar una imagen (especificando su altura y ancho) y, aparece el espacio extra que se necesita.

No todo el mundo usa texto ALT nulo en las imágenes espaciadoras. Algunos sitios web tienen alt="imagen espaciadora". Imagine lo molesto que esto puede ser para el usuario, sobre todo si se tienen diez imágenes seguidas. El lector de pantalla diría: "imagen, imagen espaciadora" diez veces consecutivas pues, por lo general, dicen la palabra "imagen" antes de leer el texto ALT. Esto no sería de utilidad.

Otros desarrolladores Web simplemente omiten el atributo ALT de las imágenes espaciadoras (y quizá de otras también). En este caso, la mayor parte de los lectores de pantalla leerán el nombre del archivo, que por ejemplo podría ser 'sitionuevo/imagenes/espaciadordeunpixel.gif'. El lector anunciaría esta imagen como: "Imagen, sitio nuevo, barra, imágenes, barra, espaciador de un pixel, punto, gif". Imagine como sonaría esto de existir diez imágenes seguidas!


Viñetas e íconos

Las viñetas e íconos deberían ser tratados análogamente a las imágenes espaciadoras; se les debería asignar texto alternativo nulo, o sea alt="". Piense en una lista de ítems con una viñeta precediendo a cada elemento. Si se asigna el texto ALT 'Viñeta' a cada imagen entonces los lectores de pantalla leerán "Imagen, viñeta" delante de cada ítem haciendo mucho más prolongada la lectura.

Los íconos que se utilizan generalmente para complementar enlaces también deberían tener alt="". Imagine el siguiente hipervínculo:

Contáctenos

Muchos sitios web utilizan el texto del enlace como texto ALT del ícono. Suponga, entonces, que en este ejemplo el ícono tuviese asignado el texto alt="contáctenos". Los lectores de pantalla leerían primero el texto ALT y luego el del enlace; dirían dos veces "contáctenos" cosa que, obviamente, no es necesario.

(En teoría las viñetas e íconos deberían referenciarse como imágenes en segundo plano por medio de un documento de estilo CSS. Esto los quitaría completamente del documento HTML y por consiguiente eliminaría la necesidad de cualquier descripción ALT.)


Imágenes decorativas

A las imágenes decorativas también debería asignárseles textos alternativos nulos, o sea alt="". Si una imagen fue concebida sólo para agradar a la vista entonces no es necesario si siquiera que el usuario del lector de pantalla se entere que la imagen está allí. Informar su presencia sólo contribuiría a la polución sonora.

A la inversa, podría argumentarse que las imágenes del sitio crean una identidad de marca y que de ocultárselas a los usuarios de lectores de pantalla se le está negando a este grupo de usuarios la misma experiencia que al resto. Los expertos en accesibilidad se inclinan a favor del primer argumento pero, desde luego, éste último también es válido.


Navegación y texto embebido en las imágenes

Los menús de navegación que requieren textos personalizados no tienen más remedio que embeber texto en imágenes. En esta situación el texto ALT no debería usarse para profundizar en el significado de la imagen. Bajo ninguna circunstancia debería el texto ALT decir, por ejemplo, "Lea todo lo referente a nuestros fantásticos servicios diseñados para ayudarlo en todo lo que haga". Si el ítem de menú dice "Servicios" entonces el texto ALT debería decir "Servicios" también. El texto ALT siempre debería describir el contenido de la imagen y repetir el texto palabra por palabra. Si se desea ampliar, como en este ejemplo, puede utilizarse el atributo title.

Lo mismo es válido para cualquier otro texto embebido en una imagen. El texto ALT debería simplemente repetir, palabra por palabra, el texto contenido en esa imagen.

(A menos que el tipo de letra empleado sea poco común a menudo no es necesario embeber texto en imágenes. Ahora se puede lograr una navegación avanzada y efectos en segundo plano con CSS.)


Logo de la empresa

Los sitios web suelen variar la manera en que aplican los textos ALT a los logos. Algunos dicen, "Nombre de la empresa", otros "Logo de Nombre de la empresa", y otros describen el propósito de la imagen (por lo general un hipervínculo a la página principal), por ejemplo, "Volver a Inicio". Recuerde, el texto ALT siempre debería describir el contenido de la imagen por lo que el primer ejemplo, alt="Nombre de la empresa", probablemente sea el mejor. Si el logo es un enlace de vuelta a la página de inicio entonces esto puede comunicarse de manera efectiva mediante la etiqueta title.


Conclusión

Escribir texto ALT efectivo no es tan difícil. Si es una imagen decorativa generalmente debería usarse el texto alternativo nulo, o sea alt="", pero nunca omitir el atributo ALT. Si la imagen contiene texto entonces el texto ALT simplemente debería repetirlo palabra por palabra. Recuerde, el texto debería describir nada más que el contenido de la imagen.

Hay que asegurarse de mantener el texto ALT tan corto y sucinto como sea posible. Escuchar una página Web con un lector de pantalla consume mucho más tiempo que los métodos tradicionales, de manera que no hay que hacer más engorrosa la experiencia de navegación para los usuarios de lectores de pantalla con textos ALT innecesarios


Original en: Writing effective ALT text for images
http://www.webcredible.co.uk/user-friendly-resources/web-
accessibility/image-alt-text.shtml