Guía de Descripciones Alternativas de imágenes
Las descripciones alternativas (o «alt text») son esenciales para asegurar que las imágenes en la web sean accesibles para todos los usuarios, incluyendo aquellos con discapacidades visuales que usan lectores de pantalla. A continuación, se detallan las pautas sobre cuándo y cómo introducir estas descripciones.
Cuándo Incluir Descripciones Alternativas
-
Imágenes Informativas:
- Qué son: Imágenes que contienen información esencial, como gráficos, diagramas, mapas, etc.
- Qué hacer: Proporcionar una descripción que transmita la información presentada en la imagen.
- Ejemplo: Para un gráfico de barras que muestra las ventas trimestrales: “Gráfico de barras que muestra que las ventas en el primer trimestre fueron de 10,000 unidades, en el segundo trimestre 12,000 unidades, en el tercer trimestre 8,000 unidades y en el cuarto trimestre 15,000 unidades”.
-
Imágenes Funcionales:
- Qué son: Imágenes que actúan como enlaces, botones u otros elementos interactivos.
- Qué hacer: Describir la función del elemento.
- Ejemplo: Para un botón de búsqueda con una lupa: “Botón de búsqueda”.
-
Imágenes Decorativas:
- Qué son: Imágenes que no aportan información ni tienen una función específica, solo mejoran el diseño visual.
- Qué hacer: Usar un alt vacío (
alt="") para que los lectores de pantalla las ignoren. - Ejemplo: Si una página tiene un borde decorativo de flores, el alt text sería
alt="".
-
Imágenes de Texto:
- Qué son: Imágenes que contienen texto relevante.
- Qué hacer: Incluir el texto presente en la imagen en la descripción alternativa.
- Ejemplo: Si una imagen contiene un cartel que dice “Rebajas del 50% en todas las prendas”, el alt text sería: “Rebajas del 50% en todas las prendas”.
-
Imágenes Complejas:
- Qué son: Imágenes que contienen información compleja que no puede ser completamente descrita en un alt text corto (por ejemplo, infografías detalladas).
- Qué hacer: Proporcionar una descripción larga en la página misma o enlazar a una página separada con la descripción completa.
- Ejemplo: Para una infografía sobre el ciclo del agua: “Infografía detallada sobre el ciclo del agua. Más información disponible en el siguiente enlace: [enlace a la descripción detallada]”.
Cómo Escribir Descripciones Alternativas
-
Sé Conciso y Claro:
- Las descripciones deben ser breves y directas, describiendo el contenido y la función de la imagen.
-
Evita Redundancias:
- No repitas información ya presente en el contexto cercano a la imagen.
-
Sé Preciso:
- Asegúrate de que la descripción refleje con precisión el contenido de la imagen.
-
Utiliza Lenguaje Neutral:
- Evita suposiciones sobre el contexto o la interpretación de la imagen.
Ejemplos Prácticos
-
Imagen de una Persona Leyendo:
- Descripción Alt: “Persona leyendo un libro en un parque”.
-
Botón de Comprar:
- Descripción Alt: “Botón de comprar”.
-
Diagrama de un Sistema Solar:
- Descripción Alt: “Diagrama del sistema solar mostrando planetas orbitando el sol”.
-
Decoración de Fondo:
- Descripción Alt:
alt="".
- Descripción Alt:
-
Infografía Compleja:
- Descripción Alt: “Infografía detallada sobre el cambio climático. Más información en el siguiente enlace: [enlace a la descripción detallada]”.
Conclusión
Incluir descripciones alternativas en las imágenes no solo es una práctica esencial para la accesibilidad web, sino que también mejora la usabilidad para todos los usuarios. Siguiendo estas pautas, puedes asegurar que tu contenido sea inclusivo y accesible para una audiencia más amplia.
Para más detalles y ejemplos, puedes consultar las directrices de la Web Content Accessibility Guidelines (WCAG) en: https://www.w3.org/WAI/tutorials/images/decision-tree/
