El Blog de Accede Me

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 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.

«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» )

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.

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.

Existen casos especiales para imágenes que contienen información que merece la pena señalar:

Imagenes de texto

Intenta evitar el uso de imágenes de texto. En la gran mayoría de casos cuándo vemos imágenes de texto no hace falta usar imágenes, en su lugar la página puede usar textos normales con algún formato aplicado. ¿La razón? Algunos usuarios aumentan el tamaño del texto, las imágenes no cambian el tamaño de la misma manera que el texto. Si hago zoom en una página, las imágenes de texto se verán borrosas, mientras que al texto no le pasar lo mismo. Hay otras muchas razones…

Si necesitas usar imágenes de texto, entonces en casi todos los casos el «alt text» será el texto mostrado en la imagen. !Es lógico!, ¿verdad? Esa suele ser la información que la imagen contiene!

Gráficos, tablas, etc.

Los gráficos y tablas normalmente contienen mucha información, demasiada para ser incluida como  parte del «alt text», ya que el «alt text» debe mantenerse muy claro. Habrá un artículo separado aquí que analiza imágenes complejas.

Tipo 3: Imágenes que son decorativas

Si la imagen no es una imagen activa (tipo 1), y si no contiene información (tipo 2), entonces es una  imágen decorativa. Las imágenes que son solo decorativas no deben tener ningún «alt text» (decriptivo), en lugar deberías usar la cadena vacía como «alt text».

¿Cómo implementarlo?

Regla nº 5: Imágenes decorativas deben tener un «alt text» vacío.

El alt text debe ser la cadena vacía (nula), i. e. alt=””. El código para tu imagen debería parecerse a esto:< img alt=”” >

Aunque la imagen sea decorativa, debe seguir teniendo el alt attribute (recuerda la regla número 1), pero no contiene ningún texto. Si tú lees en algún lugar que estas ciertas imágenes no deberían llevar alt text, lo que significa es que el alt text debe estar vacío. Repetir:!Nunca definir ninguna < img > sin el alt=’TEXTO ALTERNATIVO’!

¿Por qué?

Porque si el alt attribute no contiene texto (alt=””) el lector de pantallas ignora la imagen. Los usuarios de lectores de pantalla no necesitan saber sobre las imágenes decorativas, simplemente agregaría «desorden de audio» en la página, por lo que al asignar un alt text vacío a una imagen el lector de pantalla lo ignorará.

Sea lo que sea lo que estés desarrollando o entregando recuerda estas cinco reglas de oro al hacer el trabajo alt text para tus visitantes:

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 text» 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.