Una de las formas más comunes de mejorar la accesibilidad web es mediante la inserción de alternativas textuales en imágenes, de modo que las personas con discapacidades visuales puedan acceder al contenido sin necesidad de visualizarlo.

La accesibilidad web es un tema cada vez más relevante en nuestra sociedad, ya que muchas personas con discapacidades físicas o cognitivas dependen de tecnologías de asistencia para navegar por Internet, para que una web sea accesible se deben cumplir una serie de requisitos. Empezando por la correcta inserción de alternativas textuales.

¿Qué son las alternativas textuales en imágenes?

Las alternativas textuales, también conocidas como atributos «alt», son descripciones escritas que se añaden a las imágenes para que los usuarios que no pueden verlas puedan entender su contenido. Estas descripciones se leen en voz alta por los lectores de pantalla, que convierten el contenido visual en audio.

La inserción de alternativas textuales a las imágenes es muy importante. Ya que permiten a las personas con discapacidades visuales comprender el contenido de la web en su totalidad. Sin estas descripciones, las imágenes se vuelven inaccesibles y el contenido se pierde para una gran cantidad de usuarios.

¿Por qué son tan importantes?

Además, las alternativas textuales también son importantes para mejorar la experiencia de usuario, no sólo de aquellos con discapacidades visuales. Las descripciones pueden ayudar a los usuarios a entender mejor el contenido de una imagen, incluso si pueden verla. Esto es especialmente útil en casos en los que la imagen es compleja o no está relacionada directamente con el texto circundante.

La inclusión de alternativas textuales en las imágenes también es importante desde un punto de vista legal. Muchos países tienen leyes que exigen que los sitios web sean accesibles a personas con discapacidades, y la falta de alternativas textuales a las imágenes puede ser considerada una violación de estas leyes.

¿Cómo se insertan las alternativas textuales en imágenes?

Imágenes en formato «Img»:

La inserción de alternativas textuales en imágenes con formato «img» es importante para asegurarse de que las personas con discapacidades visuales o que utilizan lectores de pantalla puedan entender el contenido de la misma manera que las personas que no tienen estas discapacidades. Aquí hay algunos consejos para la inserción de alternativas textuales en imágenes con formato «img»:

1. Asegúrate de añadir texto alternativo a todas las imágenes de una página. El texto alternativo, también conocido como «alt text», debe ser una descripción breve y precisa de la imagen.
2.  Utiliza el atributo «alt» en el código HTML. El atributo «alt» permite agregar el texto alternativo directamente en el código HTML de la página web, lo que facilitará su acceso para las personas que utilizan lectores de pantalla.
3. Utiliza el atributo «title» para proporcionar información adicional sobre la imagen. El atributo «title» permite agregar información adicional sobre la imagen, como el autor o la fuente de la imagen.
4. Usa imágenes en los siguientes formatos: BMP, GIF, JPEG, PNG, SVG y WebP. Asegúrate de que el nombre del archivo de la imagen describa su contenido de manera clara y concisa.

Imágenes en formato «Background»

Las imágenes de fondo no tienen un atributo «alt» como las imágenes regulares y generalmente son de carácter decorativo, por lo que no es necesario proporcionar una descripción alternativa para las imágenes con este formato.

Imágenes en formato «SVG»:

Respecto a la inserción de alternativas textuales en imágenes con formato SVG:

1. Utiliza la etiqueta <title>: Al igual que con las imágenes tradicionales, las imágenes SVG también deben tener una alternativa textual. La etiqueta <title> se utiliza para proporcionar una descripción de texto alternativa para el contenido SVG. Además, esta etiqueta se puede leer en la mayoría de los navegadores y dispositivos de asistencia, por lo que es una buena práctica incluirla en todas las imágenes SVG.
2. Usa la etiqueta <desc>: La etiqueta <desc> se utiliza para proporcionar una descripción más detallada del contenido SVG. Esta etiqueta no se lee en la mayoría de los navegadores y dispositivos de asistencia, pero puede ser útil para proporcionar información adicional sobre la imagen.
3. Usa texto alternativo conciso y descriptivo: Al igual que con las imágenes tradicionales, es importante proporcionar un texto alternativo conciso y descriptivo para las imágenes SVG. El texto alternativo debe describir el contenido y la función de la imagen de manera clara.

Iconos en formato «ASCII»

Nuestras recomendaciones para la inserción de alternativas textuales en iconos formato ASCII son:

1. Insertar una clase «span» con el atributo «sr-only»:

   See the Pen
   Untitled by Taller Agencia (@webmastertalleragencia)
   on CodePen.

2. Aplicar las propiedades css para que solo los lectores de pantalla reconozcan este texto:

   See the Pen
   Untitled by Taller Agencia (@webmastertalleragencia)
   on CodePen.

3. Utiliza una descripción clara y concisa del icono. La descripción debe ser lo suficientemente detallada para que las personas puedan entender lo que representa el icono, pero no tan detallada que sea abrumadora.

En resumen, la inserción de alternativas textuales a las imágenes es una parte esencial de la accesibilidad en la web. Permite a las personas con discapacidades visuales comprender el contenido que de otra manera no podrían, mejora la experiencia del usuario y cumple con las leyes que exigen la accesibilidad en la web. Por lo tanto, es importante asegurarse de que todas las imágenes en un sitio web tengan alternativas textuales claras y descriptivas para garantizar una experiencia de usuario positiva y accesible para todos.

Si tienes dudas acerca de la inserción de alternativas textuales o en materia de accesibilidad web, contacta con nosotros y te resolveremos todas tus dudas al respecto.