1 – Introducción
Las imágenes son parte fundamental del contenido en la web y las aplicaciones. Sin embargo, no todo el mundo es capaz de percibirlas adecuadamente. No sólo podemos pensar en deficiencias visuales, ya sean congénitas o resultado de la edad. También podemos encontrar casos en los que la resolución no se adapta bien al tamaño de la pantalla.
Por todo esto, el primer criterio de accesibilidad, tal vez el más famoso, es proporcionar una descripción textual para las imágenes. Prácticamente todas las librerías de interfaz gráfica cuentan con esta posibilidad. Incluso programas como procesadores de texto ofrecen esta característica para poder elaborar documentos más accesibles para todos.
Sin embargo, no siempre está claro cuándo una imagen tiene que ser descrita o cómo hacerlo. En este tutorial, vamos a ver cómo tratar este asunto en HTML. Es completamente extrapolable a cualquier otro lenguaje de interfaz que utilicemos.
2 – Imágenes de contenido y decorativas
Lo primero que tenemos que aprender a distinguir es cuándo necesitamos aportar una alternativa textual a una imagen. En principio, sólo debemos hacerlo cuando dicha imagen sea importante para entender el contenido de la página o el documento. Da igual si lo es de una forma principal o complementaria. De lo contrario, clasificaremos esa imagen como decorativa, y así habremos de marcarla.
Por ejemplo, si elaboramos un tutorial en el que adjuntamos una captura de pantalla donde indicamos cómo ejecutar cierta operación, esa imagen será relevante y principal. Si no podemos acceder a su contenido, perderemos una parte entera de la explicación. Por otro lado, si lo que adjuntamos es una gráfica ilustrativa de lo que comentamos en el texto, puede que sigamos entendiendo el contenido sin acceder a la imagen, pero es importante porque complementa y refuerza al texto. Por el contrario, si la imagen sólo aporta en la estética de la página o el documento, la imagen será decorativa.
Hay que resaltar aquí que la misma imagen puede ser decorativa o no en función del contexto en el que se encuentre. Por ejemplo, si se trata de una página dedicada al arte, una fotografía de un cuadro o una escultura puede ser contenido por sí mismo. En cambio, si se trata de un sitio web dedicado a destinos turísticos, las mismas imágenes pueden considerarse meramente decorativas, pues sólo intentan captar la atención del cliente de forma visual.
Para aquellas imágenes que deban tener una alternativa textual, HTML nos proporciona el atributo alt. Este atributo permite introducir una cadena de texto todo lo larga que queramos. No basta con utilizar el atributo title o poner una etiqueta al pie de la imagen.
Las imágenes decorativas no deben dejarse sin atributo alt. Esto causa que los lectores de pantalla utilicen el nombre del archivo como feedback para el usuario. En lugar de eso, utilizamos el atributo alt vacío: alt=»».
Hay un caso en el que esto puede no ser suficiente. Si la imagen es decorativa, pero pertenece a un enlace, el lector de pantalla puede pretender leerla de todas formas. Al fin y al cabo, es un elemento interactivo. Podemos pensar en enlaces que tienen algún tipo de icono al lado, como una flecha. Si este icono no tiene ninguna otra intencionalidad que llamar la atención del usuario, podemos ocultarlo al lector de pantalla con el atributo aria-hidden o role=»none».
Además, si la imagen es un enlace o un botón, hay que describir la acción que lanza, no el contenido. Por ejemplo, el texto alternativo en una aplicación de correo sería «enviar» y no «un sobre».
3 – Cómo describir una imagen
Parece una cuestión trivial, pero hacerlo de forma efectiva no lo es tanto. En función del contexto y de la intencionalidad de la imagen, deberemos adaptar la descripción. Eso sí, hay que centrarse siempre en lo esencial y descartar lo accesorio. Por ejemplo, si en una imagen de autoescuela aparece un coche frente a un cruce, habrá que centrarse en describir las características importantes, como la señalización y la posición de los coches, y dará igual si estos son de una marca o un color determinado.
A continuación, os pongo algunos ejemplos que podéis encontrar a menudo:
- El logo de la página: Puede tener un texto alternativo como «Logo de X». Si además puede pulsarse para ir a la Home, también debe indicarse: «Ir al inicio – Logo de X».
- Iconos de marcado: Cualquier tipo de imagen que utilicemos para marcar alguna información, como que los campos de un formulario son obligatorios, deben describirse con la información que representan. Por ejemplo, «requerido» u «obligatorio».
- Botones de menús o barras de herramientas: Debe describirse la acción que realizan y no el icono en sí.
- Gráficas: Cuando presentamos una gráfica, debemos informar del tipo de gráfica que es, la información que se representa en cada eje y las conclusiones que se pueden extraer. Aunque puede ser interesante mencionar algunos de los datos aislados cuando suponen hitos, es más importante transmitir que, por ejemplo, la curva de transmisión del COVID-19 se aplana a partir de cierto día, en lugar de dar las cantidades para cada día.
- Capturas de pantalla: Es necesario describir lo que se ve en la pantalla de una forma contextualizada. Por ejemplo, si estamos enseñando cómo realizar una cierta tarea en un programa, hay que describir específicamente dónde hay que pulsar. Si tiene fragmentos de texto que son relevantes para el usuario, como código, también es necesario escribirlo por completo.
- Paisajes u otro tipo de imágenes: Centrarnos en los detalles fundamentales según el contexto. El color de pelo de una persona puede interesarnos si se trata de un contexto de belleza o peluquería, pero ser totalmente intrascendente si lo importante es la máquina que maneja.
4 – Conclusiones
Dar una descripción alternativa a las imágenes es uno de los fundamentos de la accesibilidad, pero no siempre es tan sencillo como aparenta. Espero que esta pequeña píldora os sirva para mejorar la accesibilidad de vuestros desarrollos.
