Imatges complexes: gràfics, infografies, mapes i descripcions llargues

Un gràfic d'evolució de l'atur, una infografia amb els passos per demanar una ajuda o el mapa d'un campus concentren desenes de dades i relacions. Cap frase d'alt no els pot substituir. El criteri 1.1.1 Contingut no textual exigeix que l'alternativa textual compleixi el mateix propòsit, de manera que per a una imatge complexa l'alternativa és necessàriament més llarga. Aquesta lliçó explica com estructurar-la, on col·locar-la i com fer que beneficiï totes les persones, no només les que fan servir un lector de pantalla.

Dues parts: alt breu i descripció llarga

L'alternativa d'una imatge complexa té sempre dues capes:

1. L'alt breu: identifica la imatge, el seu tipus i, si hi cap, la conclusió principal. «Gràfic de línies: evolució de la taxa d'atur a la Regió de Múrcia 2015-2025; descripció completa a continuació».
2. La descripció llarga: en text estructurat, amb les dades, les tendències i les relacions que mostra la imatge. Pot incloure una taula amb els valors, una llista de passos o un resum narratiu.

La descripció llarga no ha de ser una transcripció píxel a píxel. Ha de permetre a la persona extreure la mateixa informació i les mateixes conclusions que algú que mira la imatge. Per a un gràfic, això sol voler dir: què es mesura, en quines unitats, quin període, els valors clau (màxim, mínim, inici, final), la tendència i qualsevol anomalia destacada.

On posar la descripció llarga

<figure>
  <img src="paro-2015-2025.png"
       alt="Gràfic de línies: taxa d'atur a la Regió de Múrcia 2015-2025. Descripció detallada a continuació."
       aria-describedby="desc-paro">
  <figcaption>Dades il·lustratives, no oficials.</figcaption>
</figure>
<div id="desc-paro">
  <p>La taxa d'atur baixa de manera contínua del 24,6 % el 2015 a l'11,8 % el 2025,
  amb un repunt puntual el 2020 (16,5 %). La caiguda més gran es produeix entre el 2015 i el 2018.</p>
  <table>…valors anuals…</table>
</div>

Com descriure cada tipus

Gràfics de dades

• Tipus de gràfic, què mesura, unitats i període.
• La conclusió principal a la primera frase («les vendes en línia superen les de botiga des del 2023»).
• Valors clau i tendència. Si hi ha poques dades, inclou-les totes en una taula.
• Si el gràfic fa servir colors per distingir sèries, la descripció no n'ha de dependre: anomena les sèries.

Infografies

• Gairebé sempre són text maquetat com a imatge. La millor solució és publicar el contingut en HTML (encapçalaments, llistes, icones decoratives) i deixar la infografia com a complement visual amb un alt breu.
• Si no és possible, la descripció llarga segueix el mateix ordre de lectura que la infografia: títol, seccions, dades, font.

Mapes

• Un mapa de localització: la descripció és l'adreça, les referències properes i com arribar-hi («a 200 metres de l'estació d'autobusos, al costat del parc»). És més útil que descriure el dibuix.
• Un mapa temàtic (densitat de població per municipi, per exemple): taula amb els valors o resum dels patrons principals.
• Els mapes interactius (Google Maps, Leaflet) necessiten a més una alternativa a la interacció: una llista de localitzacions i un cercador.

Diagrames i organigrames

• Descriu les relacions, no les formes: «La direcció general depèn de la conselleria i d'ella en depenen tres serveis: …». Una llista niada reprodueix bé un organigrama.
• Els diagrames de flux es converteixen en llistes numerades amb condicions («Si la resposta és no, torna al pas 2»).

Gràfics generats per codi

Si els gràfics els genera una biblioteca (Chart.js, D3, Highcharts, Power BI incrustat), la responsabilitat es comparteix amb desenvolupament, però el redactor ha d'exigir el mateix: un resum textual i una taula de dades accessible al costat del gràfic. Un <canvas> sense alternativa és una imatge complexa sense alternativa. Algunes biblioteques ofereixen mòduls d'accessibilitat (Highcharts, per exemple), però la taula de dades continua sent l'opció més robusta.

Com comprovar-ho

• Llegeix només la descripció llarga, sense veure la imatge, i comprova si pots respondre les preguntes que la imatge pretén respondre.
• Demana a una companya que dibuixi o expliqui el gràfic a partir de la teva descripció.
• Comprova que la descripció és a la pàgina o enllaçada de manera evident, no només en un atribut.

Resum

• Les imatges complexes necessiten un alt breu d'identificació i una descripció llarga estructurada.
• La millor ubicació és la mateixa pàgina, visible per a tothom; aria-describedby és un reforç, no l'única via.
• Gràfics: tipus, mesura, unitats, període, conclusió, valors clau i taula. Mapes: adreça i referències. Diagrames: relacions en llistes.
• Les infografies es publiquen millor com a contingut HTML amb la imatge com a complement.
• Un gràfic en <canvas> o generat per codi necessita la mateixa alternativa textual.