Accesibilidad web: Cómo trabajar los textos alternativos en las imágenes

En esta entrada voy a hablar de uno de los principales problemas de accesibilidad web que hay. Aún habrá muchas personas que no lo sepan, así que no viene mal recordarlo: Los textos alternativos en las imágenes.

Accesibilidad web: Cómo trabajar los textos alternativos para las imágenes

Textos alternativos en las imágenes

Uno de los errores más habituales es que se encuentran textos alternativos que no son los adecuados. Porque a veces no se tiene en cuenta el contexto o la función de la imagen.

Para identificar más fácilmente cuál es la función de las imágenes, hay que pararse a pensar en las características del criterio 1.1.1 de las WCAG 2.0.

Por lo tanto, vamos a definir las diferentes opciones o posibilidades que se pueden dar a la hora de analizar una imagen.

¿La imagen es o forma parte de un enlace o botón?

Sí, la imagen es el único elemento dentro del enlace o es un mapa de imagen o un botón de tipo imagen:

  • Si la imagen es un logo, o es un icono, imagen o botón de tipo imagen en el que la imagen no tiene texto (por ejemplo un icono de una lupa) se debe añadir a la imagen o al botón de imagen el atributo alt, en el cual se indique la función de la imagen. Por ejemplo: alt="Buscar" (para el icono de una lupa) o alt="Página principal de la web de Mª Carmen de Alba (para el logotipo)
  • Si es un icono, imagen o botón de tipo imagen en el que la imagen tiene texto (como por ejemplo una imagen, o un botón de tipo imagen, con un sobre y el texto “Enviar”), se debe añadir a la imagen (o al botón de tipo imagen) el atributo alt, en el cual se indique la función de la imagen que normalmente será su texto (por ejemplo: alt="Enviar")
  • Si es un mapa de imagen (por ejemplo un mapa de España), a la imagen se debe añadir un atributo alt que identifique el contenido y su función (por ejemplo alt="Mapa de España. Seleccione una Comunidad Autónoma para acceder a su información turística") y a las áreas del mapa se les debe añadir el atributo alt identificando cada área (por ejemplo, alt="Galicia"). Con la técnica H24 puedes ampliar información sobre esta característica.

O por el contrario:

No, la imagen no es el único elemento dentro del enlace, ni es un mapa de imagen ni un botón de tipo imagen:

  • Si la imagen aporta información adicional al texto del enlace, y por tanto complementa la información del texto del enlace (por ejemplo un enlace que incluye el texto “Ponencia WordCamp Chiclana 2017” seguido de un icono de fichero PDF), se debe incluir a la imagen un atributo alt con la información adicional que transmite la imagen (por ejemplo alt="en formato PDF").
  • Si la imagen no aporta información adicional, es solo decorativa (por ejemplo el icono de una casa delante del enlace “Home”) tendrá el atributo alt vacío (y no debe incluirse el atributo title, a menos que también esté vacío), o bien la imagen se definirá en la CSS, por ejemplo con background-image.

 

¿La imagen es decorativa, invisible o no proporciona información adicional? (y no es un enlace)

  • Si, la imagen es decorativa, invisible y no aporta información adicional.

Por ejemplo un icono de advertencia que va seguido de un texto que ya comienza por “¡Advertencia!”. La imagen deberá tener el atributo alt vacío (y no debe incluirse el atributo title, a menos que también esté vacío) o bien se deberá definir la imagen en la CSS, por ejemplo mediante background-image.

  • No, la imagen aporta información y apoya al contenido.

En este caso hay que comprobar si se trata es un cuadro o crea una experiencia sensorial.

Si se trata de un cuadro, se incluirá el atributo alt indicando el nombre de la obra comúnmente aceptado (si lo tiene, por ejemplo alt="Las meninas de Velázquez") o una breve descripción que identifique el contenido.

Las meninas de Velázquez
No, no es un cuadro. Aquí debes incluir el atributo alt a la imagen.
El texto alternativo proporcionado por este atributo debe ser una breve descripción que identifique el contenido. (por ejemplo, en el caso de una escultura de arena, alt="Gran escultura de arena en una playa. Representa un rostro furioso de hombre hundido en la arena por una mano.")

Gran escultura de arena en una playa. Representa un rostro furioso de hombre hundido en la arena por una mano

Si es posible o útil se puede incluir un texto descriptivo adicional, por ejemplo si existe alguna razón especial por la cual se ha incluido dicha imagen en la página.

¿La imagen es parte de una prueba o test que queda invalidado si se describe la imagen? (y no es un enlace)

  • Si es una prueba o test visual (por ejemplo un test lógico de formas o un test de daltonimo) se incluirá a la imagen el atributo alt con una breve descripción que identifique el contenido (por ejemplo alt="Test visual de daltonismo")

 

test visual de daltonismo

  • Si se trata de un CAPTCHA, una prueba para comprobar si el usuario es una persona o una máquina, se incluirá a la imagen un atributo alt que indique el propósito del CAPTCHA (por ejemplo alt="Introduce este texto en el campo 'Captcha'. Si no puedes ver la imagen pulsa el botón 'Audio' disponible tras la imagen.") y también es necesario ofrecer otro CAPTCHA alternativo en una modalidad sensorial diferente, por ejemplo auditiva.

Captcha

¿La imagen forma parte de una serie de imágenes contiguas que transmiten una información de forma conjunta?

  • , la imagen forma parte de una serie de imágenes contiguas que transmiten una información de forma conjunta

Por ejemplo, en una puntuación de 5 estrellas, formada con cinco imágenes de estrellas contiguas, tres en amarillo y dos en blanco, el alt de la primera imagen será: alt="Puntuación: tres estrellas de cinco", y el resto de las imágenes tendrán texto alternativo nulo, alt="".

No, la imagen no forma parte de una serie de imágenes contiguas que transmiten una información de forma conjunta.

  • Si la imagen solo tiene texto se incluirá el atributo alt con el texto de la imagen (por ejemplo, para una imagen con el texto “5 años de garantía” se incluirá alt="5 años de garantía") Es preferible usar texto con el estilo deseado definido en la CSS en vez de una imagen de texto.
  • Si la imagen incluye texto no decorativo (por ejemplo la imagen de un gráfico con el texto de la leyenda y el título incluidos como parte de la imagen, se incluirá el atributo alt con la información que transmite la imagen y que debe incluir el texto. Por ejemplo, alt="Venta de comida. Gráfico circular: Sandwich=20%, Ensaladas=15% Sopas=25% Bebidas=22% y Postres=18%"

Como recomendación, usa texto y no imágenes de texto siempre que sea posible.

Gráfico

 

  • Si la imagen no contiene texto, incluye un atributo alt con la información que transmite la imagen. Por ejemplo, un icono de advertencia, seguido de un párrafo de texto “Tu sesión está a punto de expirar” tendrá como texto alternativo alt="¡Advertencia!". O por ejemplo, una imagen de los jugadores del Real Madrid levantando la Copa de Europa tendrá como texto alternativo alt="Sergio Ramos, capitán del Real Madrid levantando la Copa de Europa acompañado de sus compañeros"

 

Sergio Ramos, capitán del Real Madrid levantando la Copa de Europa acompañado de sus compañeros

 

Texto alternativo en imágenes complejas

Si la imagen es compleja tendrá un atributo alt que identifique el contenido o que proporcione una breve descripción del mismo. Además deberá tener una descripción larga que puede proporcionarse por medio de diferentes técnicas:

  • En otra página: se debe incluir el enlace a esta página adyacente a la imagen, inmediatamente antes o después de la misma.
  • En la misma página, a continuación de la imagen: incluir en el alt una referencia a la ubicación de la descripción larga.
  • En la misma página, lejos de la imagen: se debe incluir un enlace (un ancla) a la zona de la descripción. Este enlace debe estar inmediatamente antes o después de la imagen.
  • Mediante el atributo LONGDESC, siempre que no sobrepase los 150 caracteres.

 

¿A quién beneficia?

  • A las personas con dificultades para percibir el contenido visual (personas con ceguera, baja visión, sordo-ciegas) o con dificultades de comprensión del contenido visual. La información contenida en el texto se puede presentar al usuario de la manera que mejor se adapte a sus necesidades: en braille, leída en voz alta o presentarla visualmente.
  • A las personas que por limitaciones técnicas no pueden acceder al contenido visual: navegan con las imágenes deshabilitadas por tener una conexión lenta o para ahorrar costes en la tarifa por datos, hay un problema en el servidor y no se están sirviendo las imágenes o alguna de estas ya no está disponible. También pueden estar usando un navegador solo-texto.
  • A los buscadores web, pues se basan en el contenido textual para indexar los contenidos.

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *