Introducción

Añadir texto alternativo para las imágenes es uno de los principales principios de la accesibilidad Web.
También es uno de los más difíciles de aplicar adecuadamente. La Web esta repleta de imágenes con un texto alternativo incorrecto o una falta de definición del mismo.
Como ocurre en muchas cosas de accesibilidad Web, el texto alternativo es a menudo una cuestión de interpretación personal. Mediante unos ejemplos se aclarará la interpretación y uso adecuado del texto alternativo.

Texto alternativo ‘básico’

El texto alternativo como muy bien ya define la palabra, proporciona una alternativa de texto a aquellos elementos que no contienen texto en la página Web.

El texto alternativo en imágenes sirve para varias funciones:

  • Es leído por lectores de pantalla, el cual permite que dicha imagen sea accesible para usuarios con ciertas discapacidades visuales o cognitivas.
  • Se muestra en el lugar de la imagen para aquello navegadores que no admiten la visualización de imágenes.
  • Proporciona una descripción y un significado semántico a las imágenes que pueden ser leídos por los motores de búsqueda, y determinaa el contenido de la imagen.

El principio fundamental es que los lectores de pantalla puedan determinar que se presenta en la imagen. El texto debe ser siempre orientado al usuario.

El texto alternativo se puede presentar de dos formas:

  • Con el atributo alt del elemento img.
  • En el contexto o entorno de la imagen en sí.

Esto quiere decir que el atributo alt no es la única forma para proporcionar la descripción del contenido de una imagen. Esta información también puede ser proporcionada en un texto descriptivo junto a la imagen o en la página que contiene la imagen. También puede usarse un enlace y/o longdesc que haga referencia a una página dónde contenga la descripción de la imagen.

En muchas casos, cuando la imagen es simplemente decorativa el atributo alt se deja vacío. O se usa como fondo de un elemento HTML desde la hoja de estilos CSS.

El contexto lo es todo

Cuando procedemos a aplicar un texto alternativo a una imagen. Debemos tener en cuenta que el texto puede variar dependiendo del contexto y el entorno de la imagen en sí. Tomemos como ejemplo la siguiente imagen de George Washington:

Antes de considerar el texto alternativo debemos tener en cuenta que representa y contiene la imagen y que sabemos de ella.

Ejemplo 1

George Washington

Debido a su papel como Comandante en Jefe de las fuerzas americanas en la Guerra de la revolución, y más tarde el primer Presidente de los Estados Unidos. George Washington, es a menudo conocido como “El padre de su País”.

¿Cuál sería el texto alternativo adecuado para la imagen del Ejemplo 1?

  1. “La imagen de George Washington”
  2. “George Washington, el primer presidente de los Estados Unidos”
  3. Dejando el atributo alt vacío será suficiente.
  4. “George Washington”

El primer paso para determinar un texto alternativo para una imagen es decidir si la imagen representa un contenido o tiene alguna “función”. En la mayoría de los casos, una imagen tiene una función si está contenida en un enlace. Si el contenido que transmite
la imagen se encuentra en un texto junto a ella, nos sería suficiente con poner un alt vacío. En el ejemplo anterior, el texto que presenta la imagen, informa al usuario de que se trata de George Washington. También añadimos que, la imagen no tiene ninguna función porque no es un enlace.

Veamos algunas reglas importantes en relación con el atributo alt:

  • Preciso y equivalente con lo que representa la imagen.
  • Resumido, es decir, debe ser expresado con pocas palabras, que sea conciso y preciso. Normalmente con unas pocas palabras se puede representar la imagen, en alguna ocasión si es necesario incluir una breve frase o dos.
  • No redundantes o proporcionar la misma información como texto en el contexto de la imagen.
  • No usar las expresiones “de la imagen…” ó “foto de…” para describir la imagen. Por lo general evidentemente el usuario sabe que se trata de una imagen.

En base a estas reglas, la Opción D (George Washington) sería la mejor alternativa de texto para este caso. La Opción A como ya hemos comentado, innecesariamente se describe como una imagen. La Opción B proporciona información adicional que no se presenta directamente en la imagen y también es redundante con el texto que se representa justo después.
La Opción C (atributo alt vacío) no es apropiada, porque la imagen no está directamente presentada en el contexto. No nos describe de forma concisa quien aparece en la imagen.

Ejemplo 2

George Washington

Debido a su papel como Comandante en Jefe de las fuerzas americanas en la Guerra de la revolución, y más tarde el primer Presidente de los Estados Unidos. George Washington, es a menudo conocido como “El padre de su País”.

¿Cuál sería el texto alternativo apropiado para la imagen del Ejemplo 2?

  1. “George Washington”
  2. Con el atributo alt vacío será suficiente.
  3. “Imagen”
  4. La imagen no necesita atributo alt.

En este caso, el contenido de la imagen se presenta justo debajo de la misma. Por lo que la Opción B (alt=” “) es la mejor opción. La Opción A sería redundante, la Opción C proporciona información inútil y la Opción D (sin atributo alt) nunca es la opción correcta, una imagen debe tener siempre el atributo alt.

Ejemplo 3

Entrada de la Wikipedia de George Washington

George Washington

¿Cuál sería el texto alternativo adecuado para la imagen del Ejemplo 3?

  1. Con el atributo alt vacío será suficiente.
  2. “Entrada de la Wikipedia de George Washington”
  3. “Leer más”
  4. “George Washington”

En este ejemplo, la imagen es un enlace. Siempre que la imagen se encuentre dentro de un enlace, la función de la imagen deberá presentarse en el texto alternativo que también está en enlace. En este caso no hay texto adyacente en el enlace que describe la función, por lo que deberá presentarse en el atributo alt.
Como resultado, la Opcion B es probablemente la mejor opción. Aunque la frase “George Washington” es redundante con el texto que sigue, en este caso es necesario para describir la función del enlace adecuadamente. Esto también puede ser subsanado, haciendo que el pié de foto sea también parte del enlace.

La Opcion A no es la adecuada. Una imagen dentro de un enlace nunca debería tener un alt vacío, a menos que el atributo alt del enlace contenga la descripción de la imagen. Esto es para que el lector de pantalla pueda leer a donde nos lleva el vínculo de la imagen. La Opción C no proporciona una descripción adecuada de la función del enlace, además está fuera de contexto. Y la Opción C es redundante en torno al texto, y no describe la función del enlace.

Siempre debe evitarse el uso de “enlace” o “haga clic en esta imagen” o un texto similar en el atributo.

Ejemplo 4

La pintura de George Washington cruzando el Río Delaware

En este cuadro, el artista Emanuel Leutze utiliza la luz, el color, la forma, perspectiva, proporción, y el movimiento para crear la composición.

¿Cuál sería el texto alternativo apropiado para la imagen del Ejemplo 4?

  1. “George Washington”
  2. “La pintura de George Washington”
  3. “La pintura de George Washington cruzando el Río Delaware”
  4. “Un clásico de la pintura que demuestra el uso de la luz y el color para crear la composición”
  5. “La pintura de George Washington cruzando el Río Delaware. Remolino de olas rodeando el barco, cuando el majestuoso George Washington contemplaba la tormenta y los rayos de luz al otro lado del río, por donde llevaba sus tropas para la batalla.”

Como se ha dicho anteriormente, tenemos que determinar si el contenido de la imagen se presenta en el contexto de su entorno. En este caso no se representa del todo correctamente, la imagen no está dentro de un enlace. También tenemos en cuenta que, esta imagen conllevo un examen mucho más dificil que las anteriores, y la mejor respuesta no puede ser determinada por el texto limitado que hemos proporcionado en el epígrafe. Por lo tanto vamos a estudiar las opciones posibles.

La Opción A (”George Washington”) no describe adecuadamente el contenido de la imagen. El hecho de que únicamente se trate de George Washington en la pintura no es relevante en este contexto. La Opción B (”La pintura de George Washington”) puede ser la adecuada, pero ofrece poco contenido adicional. Sin embargo, es apropiada para describir la imagen como una pintura, en contraposición a una fotografía u otro tipo de imagen. La Opción C proporciona más información que puede ayudar al usuario a identificar el contenido en sí. Recordar que el texto alternativo no es solo para las personas ciegas. La Opción D podría ser la apropiada, si el propósito de la imagen es presentar una técnica de arte y el contenido de la imagen en sí no fuese importante. La Opción E, podría también ser la alternativa adecuada pero es demasiado extensa para el usuario. Por lo tanto la Opción C sería la correcta en la mayoría de los casos.

Resumiendo, el contexto lo es todo. Determinar el contenido de la imagen y la función del enlace en el caso de que exista, analizar el contexto de su entorno (epígrafe) y en consecuencia proporcionar un texto alternativo.

Imágenes funcionales

Las imágenes se usan a menudo no sólo para proporcionar el contenido, sino proporcionar importantes funciones, tales como la navegación.

Ejemplo 5

Navegación de botones con imágenes

“Productos” es parte de la imagen de la barra de navegación.

¿Cuál sería la opción correcta para el alt de Productos en el Ejemplo 5?

  1. “Productos”
  2. “Enlace a los productos”
  3. La imagen no transmite contenido, por lo que usar alt=”" será suficiente.

En este caso la Opción A es la mejor respuesta. Proporciona tanto el contenido como la función de la imagen. La imagen muestra la palabra “Productos” y también es un enlace a la página de productos. La Opción B es una elección correcta, ya que la imagen está dentro de un enlace y sobre el texto “Enlace a…”.Y la última opción como se ha descrito anteriormente, el alt de una imagen que está dentro de un enlace no debe estar vacío.

Ejemplo 6

Continuar a la página siguiente para leer sobre la presidencia de George Washington.

Continuar con la Presidencia de George Washington

¿Cuál sería el alt más apropiado para la flecha azul del Ejemplo 6?

  1. “siguiente”
  2. “página siguiente”
  3. “La Presidencia de George Washington”
  4. “Continuar con la Presidencia de George Washington”

Una vez más este ejemplo no tiene una respuesta totalmente clara. De hecho cualquiera de las opciones podría ser la apropiada. La Opción A y B serían suficientes en la mayoría de los casos. La C proporciona bien la relación del enlace pero no la acción. Quizás de todas estas opciones la D podría ser la mejor, ya que informa la relación y expresa que es parte de una serie de páginas. Y dándole más vuelta al rizo podríamos usar la imagen de la flecha con un alt vacío y poner el texto “Página Siguiente” al lado de la imagen. O simplemente poner el enlace con el texto “Página siguiente” y aplicarle desde CSS la flecha azul como fondo del mismo.

Ejemplo 7

Descargar la Solicitud de Empleo Documento PDF

¿Cuál sería el alt más apropiado para imagen del Ejemplo 7?

  1. “Solicitud de Empleo”
  2. “Documento PDF”
  3. “Icono PDF”
  4. El contenido de la imagen se presenta en el contexto, por lo que (alt=”") es lo más apropiado.

Observamos que la imagen esta dentro del enlace. Esto es fundamental ya que a menudo se accede a los enlaces desde fuera de su contexto.

La Opción A (”solicitud de empleo”) es redundante con el texto que tiene delante. La Opción B es la mejor en este caso ya que proporciona claramente el significado de la imagen. La Opción C describe la imagen en sí, pero no es apropiada para este contexto. En otro contexto quizás si se utilizaría esta opción, ya que podría ser importante que el usuario supiera que se trata de un icono.

Debemos tener en cuenta que, en el caso de que este enlace se repita múltiples veces con la misma imagen, tendríamos que identificar la imagen de cada enlace con un texto como: “Descargar la solicitud de empleo en formato PDF”. Ya que sino repetiríamos el alt (”Documento PDF”) varias veces en la misma página.

Imágenes decorativas

Las imágenes decorativas no representan un contenido importante. En casi todos los casos eset tipo de imágenes contendrá el atributo alt vacío.

Ejemplo 8

Nuestro negocio promete el mejor servicio que usted pueda encontrar en el planeta. Nuestro equipo esta profesionalmente cualificado para ofrecer un excelente servicio al cliente, en todo el proceso de negociación del contrato.

La satisfacción del cliente es nuestra máxima prioridad y está garantizada.

¿Cuál sería el atributo alt de la imagen del Ejemplo 8?

  1. “Apretón de manos”
  2. “Los empresarios se dan la mano para completar un contrato”
  3. alt=”" será suficiente
  4. “Garantizamos nuestros servicios profesionales”.

En este ejemplo, se ve claramente que esta imagen no nos describe absolutamente nada relevante. Ya que esto lo hace el texto que esta junto a la imagen. Por lo tanto es una imagen decorativa, y por ello la opción correcta es la C (alt=”").

Cuando la imagen se usa con fines decorativas siempre debemos intentar siempre usar y definir la imagen desde la hoja de estilos CSS.

Imágenes avanzadas

Hay algunos casos en el que la determinación de texto alternativo puede ser más dificil de aplicar. Vamos a ver los casos más comunes que se nos pueden presentar:

Botones con imagen

En los botones se debe saber que, se debe de describir la función del botón. En el caso de una imagen de un botón debemos darle al alt dicha función. Por ejemplo: “Enviar datos”, “Enviar búsqueda”, etc… Aunque para ello siempre intentaremos usar un input de tipo submit y desde CSS le aplicamos los estilos para conseguir el aspecto deseado.

Mapa de imágenes

Cuando utilizamos mapa de imágenes siempre deberemos aplicarle un atributo alt apropiado. Es decir, si tenemos un mapa de España con las comunidades autónomas debemos ponerle al alt el texto de la comunidad autónoma (alt=”Andalucía”). También debemos dar una alternativa al mapa para poder seleccionar las opciones de la imagen de otra manera. Como por ejemplo un select con las mismas opciones que tenemos en el mapa de imágenes.

Logos

Es una práctica común en la Web utilizar el logotipo de la empresa como enlace a la página principal. Debido a que esta práctica es bastanet común, nos bastaría con escribir en el alt de la imagen el nombre de la empresa más el tipo de imagen. (alt=”Nombre empresa Logo”)

Imágenes complejas

Cuando nos surge poner una alternativa de texto a una imagen de tipo gráfico y no podemos definirlo en 1 o 2 frases breves, debemos describir todo el contenido de la imagen con un texto a continuación o un enlace a otra página donde contenga dicha descripción. Cuando usamos este método muchos suelen dejar el atributo alt de la imagen vacío, ya que justo debajo estamos describiendo su contenido. Pero también podemos añadir en el atributo una pequeña frase que describa de que trata del gráfico.

Conclusión

Este articulo pretende aclarar todas las dudas que aparecen con el uso de los texto alternativos, con esto ayudamos a que nuestros contenidos web sean más accesibles para las personas con discapacidad.

El uso de textos alternativos a las imágenes es uno de los principios de accesibilidad más fáciles de aprender pero también uno de los más dífíciles de dominar.

El texto alternativo puede ser proporcionado en el atributo alt o en el contexto de la imagen.

Cada imagen debe tener un atributo alt.

Los textos alternativos deben:

  • Exponer los contenidos y funciones de la imagen.
  • Ser concisos y precisos.

Los textos alternativos no deben:

  • Ser redundantes
  • Utilizar frases del tipo: “imagen de ..” o “gáfico de…”

El texto alternativo depende en gran medida del contexto de la imagen.

El alt de una imagen funcional ( ej: una imagen con enlace) debe describir el enlace, así como el contenido.
Las imágenes decorativas deben llevar un alt, pero este deberá estar vacío (alt=”").

La accesibilidad de una Web, aumenta en gran medida, si el texto alternativo es aplicado correctamente.

Fuente: webaim.org