Imágenes complejas: gráficos, infografías, mapas y descripciones largas

Un gráfico de evolución del paro, una infografía con los pasos para pedir una ayuda o el mapa de un campus concentran decenas de datos y relaciones. Ninguna frase de alt puede sustituirlos. El criterio 1.1.1 Contenido no textual exige que la alternativa textual cumpla el mismo propósito, así que para una imagen compleja la alternativa es necesariamente más larga. Esta lección explica cómo estructurarla, dónde colocarla y cómo hacer que beneficie a todas las personas, no solo a quienes usan lector de pantalla.

Dos partes: alt breve y descripción larga

La alternativa de una imagen compleja tiene siempre dos capas:

1. El alt breve: identifica la imagen, su tipo y, si cabe, la conclusión principal. «Gráfico de líneas: evolución de la tasa de paro en la Región de Murcia 2015-2025; descripción completa a continuación».
2. La descripción larga: en texto estructurado, con los datos, tendencias y relaciones que la imagen muestra. Puede incluir una tabla con los valores, una lista de pasos o un resumen narrativo.

La descripción larga no tiene que ser una transcripción pixel a pixel. Tiene que permitir a la persona extraer la misma información y las mismas conclusiones que alguien que mira la imagen. Para un gráfico, eso suele significar: qué se mide, en qué unidades, qué periodo, los valores clave (máximo, mínimo, inicio, fin), la tendencia y cualquier anomalía destacada.

Dónde poner la descripción larga

<figure>
  <img src="paro-2015-2025.png"
       alt="Gráfico de líneas: tasa de paro en la Región de Murcia 2015-2025. Descripción detallada a continuación."
       aria-describedby="desc-paro">
  <figcaption>Datos ilustrativos, no oficiales.</figcaption>
</figure>
<div id="desc-paro">
  <p>La tasa de paro baja de forma continua del 24,6 % en 2015 al 11,8 % en 2025,
  con un repunte puntual en 2020 (16,5 %). La mayor caída se produce entre 2015 y 2018.</p>
  <table>…valores anuales…</table>
</div>

Cómo describir cada tipo

Gráficos de datos

• Tipo de gráfico, qué mide, unidades y periodo.
• Conclusión principal en la primera frase («las ventas online superan a las de tienda desde 2023»).
• Valores clave y tendencia. Si hay pocos datos, inclúyelos todos en una tabla.
• Si el gráfico usa colores para distinguir series, la descripción no debe depender de ellos: nombra las series.

Infografías

• Casi siempre son texto maquetado como imagen. La mejor solución es publicar el contenido en HTML (encabezados, listas, iconos decorativos) y dejar la infografía como complemento visual con alt breve.
• Si no es posible, la descripción larga sigue el mismo orden de lectura que la infografía: título, secciones, datos, fuente.

Mapas

• Un mapa de localización: la descripción es la dirección, las referencias cercanas y cómo llegar («a 200 metros de la estación de autobuses, junto al parque»). Es más útil que describir el dibujo.
• Un mapa temático (densidad de población por municipio, por ejemplo): tabla con los valores o resumen de los patrones principales.
• Los mapas interactivos (Google Maps, Leaflet) necesitan además alternativa a la interacción: una lista de localizaciones y un buscador.

Diagramas y organigramas

• Describe las relaciones, no las formas: «La dirección general depende de la consejería y de ella dependen tres servicios: …». Una lista anidada reproduce bien un organigrama.
• Los diagramas de flujo se convierten en listas numeradas con condiciones («Si la respuesta es no, vuelve al paso 2»).

Gráficos generados por código

Si los gráficos los genera una librería (Chart.js, D3, Highcharts, Power BI incrustado), la responsabilidad se comparte con desarrollo, pero el redactor debe exigir lo mismo: un resumen textual y una tabla de datos accesible junto al gráfico. Un <canvas> sin alternativa es una imagen compleja sin alternativa. Algunas librerías ofrecen módulos de accesibilidad (Highcharts, por ejemplo), pero la tabla de datos sigue siendo la opción más robusta.

Cómo comprobarlo

• Lee solo la descripción larga, sin ver la imagen, y comprueba si puedes responder a las preguntas que la imagen pretende responder.
• Pide a una compañera que dibuje o explique el gráfico a partir de tu descripción.
• Comprueba que la descripción está en la página o enlazada de forma evidente, no solo en un atributo.

Resumen

• Las imágenes complejas necesitan un alt breve de identificación y una descripción larga estructurada.
• La mejor ubicación es la propia página, visible para todo el mundo; aria-describedby es un refuerzo, no la única vía.
• Gráficos: tipo, medida, unidades, periodo, conclusión, valores clave y tabla. Mapas: dirección y referencias. Diagramas: relaciones en listas.
• Las infografías se publican mejor como contenido HTML con la imagen de complemento.
• Un gráfico en <canvas> o generado por código necesita la misma alternativa textual.