¿Estás usando el atributo «alt text» apropiadamente?
El uso inconsistente de los «alt text» es uno de los problemas más comunes encontrados en la accesibilidad web. Estas reglas de oro harán que tus «alt text» sean mas útiles para los usuarios que visiten tu página web y harán que tu página sea más fácil de comprender. Estas reglas están dirigidas para editores de contenido pero también pueden ser útiles para cualquiera que produzca contenido en la web.
Regla nº 1: Cada <img> debe tener un atributo alt
Regla nº 2: Describe la información, no la imagen.
Regla nº 3: Las imágenes activas requieren «alt texts» descriptivos.
Regla nº 4: Las imágenes que contengan información requieren «alt text» descriptivos.
Regla nº 5: Las imágenes decorativas deben tener «alt text» vacío.
¿Qué es un atributo «alt text»?
«Alt text» es un texto alternativo definido en elemento HTML imagen. Las imágenes se codifican en HTML de la siguiente manera: <img alt=»texto alternativo»>
Puede que tú nunca veas realmente el código de la página donde estás editando tu página web o cuando estás añadiendo contenido nuevo, en lugar de esto, probablemente uses un CMS (Sistema de Gestión de Contenidos) o algo como del estilo de WordPress. Sea lo que sea lo que estés usando para añadir contenido a página web, cuando añadas una imagen deberías solicitar «alt text» o un texto alternativo (puede que se llame ligeramente diferente, pero deberías solicitar algún tipo de nombre para la imagen lo más probable es que sea el «alt text» )
¿Por qué son útiles los atributos «alt text»?
No todos los usuarios pueden ver imágenes. Los visitantes discapacitados de tu página web tal vez estén utilizando una asistencia tecnológica como lectores de pantalla o otros software de lectura de textos que leen la página en voz alta, y ese software leerá el «alt text» en lugar de la imagen. Existen otras situaciones en las que los «alt text» también son utilizados, como por ejemplo cuando un usuario tiene las imágenes desactivadas (ejemplo: está usando una conexión a Internet muy lenta, ¡algo que aún sucede constantemente!) en esos casos, los usuarios verán el texto alternativo en lugar de la imagen.
Existen otras maneras para implementar imágenes, por ejemplo, es posible usar estilos CSS para añadir imágenes de fondo, pero eso lo hacen normalmente los desarrolladores front-end y no los editores de contenido, y por lo tanto no será cubierto como parte de este artículo. Nosotros nos concentraremos aquí en los «alt text» de imágenes tradicionales.
Por lo que…… ¿Qué necesitas hacer para tener un buen atributo alt?
Cada imagen debe tener el atributo alt incluido:
Regla número 1: Cada <img> debe tener un attribute alt.
No hay excepciones para esto. El elemento <img> siempre debe contener el atributo alt. No importa para qué será usada la imagen, o que muestre, o incluso lo pequeña que sea.
Que tipo de texto debes usar para el atributo alt depende de la imagen y se explica a continuación, pero tú debes incluir siempre o alt=»» (alt text vacío) o alt «texto descriptivo» (alt texto descriptivo).
Regla número 2: Describe la información, no la imagen.
En otras palabras, nunca debes describir cómo es la imagen, en su lugar, explica la información que contenga la imagen.
Ejemplo:
Imagina el logo de Twitter.
El «alt text» para esta imagen debería ser alt=»Twitter» o algo por el estilo (dependiendo del contexto y cómo es usada la imagen), pero no debería ser «pájaro azul» o algo similar. ¿Suena obvio? Hemos visto muchos sitios que incluyen descripciones de qué aparece en la imagen en los «alt text», normalmente en páginas que han hecho un esfuerzo para mejorar la accesibilidad pero no han comprendiendo los requisitos.
Entonces, ¿Qué es exactamente un «alt text»? Bueno, esto depende de la imagen.
Afortunadamente, solo existen 3 tipos fundamentales de imágenes que necesitas considerar:
Tipo1: «Imágenes «activas«, i.e. Imágenes que llevan a cabo una acción (links, botones, etc.)
Tipo 2: Imágenes que contienen información.
Tipo 3: Imágenes que son simplemente decorativas.
Cuando decidimos cómo hacer una imagen accesible, primero necesitamos escoger de la lista de arriba que tipo de imágenes son.
Tipo 1: Imágenes activas
¿Qué es una imagen activa?
Es facilmente comprobable si una imagen es activa o no: Una imagen «activa» es una que lleva a cabo una acción o tiene alguna funcionalidad. El ejemplo más común es una imagen enlace, i. e. donde una imagen es el único contenido de un link.
Nota: Cuando un solo link contiene un imagen como también contiene un texto no cuenta como una imagen activa.
¿Cómo implementarla?
Regla nº 3: Imágenes activas requieren de un «alt text» descriptivo.
El «alt text» para una imagen activa debe describir la acción que la imagen lleva a cabo. Por lo tanto si tienes una imagen enlace entonces el «alt text» debe decir al usuario qué hace el enlace. Si es un enlace a otra página entonces podría ser el nombre de esa página, si el enlace realiza una acción en esa página entonces nombra la acción (ejemplo: «expandir» si esta expande una sección, «Enviar esta página por correo electrónico» si es un enlace al email, etc.)
Tipo 2: Imágenes que contienen información.
Si la imagen no es una imagen activa (tipo 1 como arriba), entonces necesitas comprobar si contiene información o no.
Algunas veces esto es sencillo, un gráfico contendrá alguna información, o una imagen con texto contiene información. Por desgracia, no siempre es así de sencillo, en algunos casos necesitas usar tu criterio para decidir si una imagen tiene información o no. La pregunta principal es, ¿se perdería algo el usuario si quito la imagen? Si el usuario se perdería alguna información si quitamos la imagen, entonces es una imagen de tipo 2. Si la imagen es simplemente para decorar, o si la misma información está en alguna parte del texto, entonces es una imagen decorativa (tipo 3).
¿Cómo implementarla?
Regla nº 4: Las imágenes que contengan información requieren «alt text» descriptivos.
Si una imagen contiene información, entonces necesitas dar esa información al usuario en un formato alternativo. Si el usuario no puede ver la imagen, necesita tener la información de otra manera. El «alt text» debe ser una breve descripción de la información.
Imagenes de texto.
Gráficos, tablas, etc.
Tipo 3: Imágenes que son decorativas
Regla nº 5: Imágenes decorativas deben tener un «alt text» vacío.
Recuerda: Conclusiones para tener un atributo alt ganador
