Com crear gràfics que funcionin per a tothom

El problema dels gràfics

Els gràfics i diagrames són objectes inherentment visuals. Codifiquen la informació mitjançant la forma, la posició i el color: tres canals que resulten o bé sense significat o bé distorsionats per a una part significativa de la teva audiència.

Al voltant del 8% dels homes tenen alguna forma de deficiència en la visió del color. Els usuaris de lectors de pantalla no reben cap informació significativa d’un gràfic de barres en SVG tret que el desenvolupador l’hagi proporcionada explícitament. I els usuaris de teclat sovint es troben que els gràfics interactius són completament inaccessibles.

El resultat: la visualització de dades és probablement l’àrea del disseny web on la distància entre el que experimenten els usuaris vidents i el que experimenta tothom altre és més gran. I és una distància que les organitzacions poques vegades detecten, perquè les auditories d’accessibilitat se centren en els formularis i la navegació abans d’arribar als gràfics de la pàgina d’informes.

Aquesta guia explica què requereix realment una visualització de dades accessible: no una llista de comprovació, sinó una comprensió de per què fallen els gràfics i què fer-hi.

Per què els gràfics són especialment difícils

La majoria d’elements HTML tenen un rol, un nom i un estat natius que les tecnologies d’assistència entenen. Un <button> és un botó. Una <table> és una taula amb files i columnes. Un camp de formulari té una etiqueta.

Un gràfic renderitzat com a SVG o canvas no té res d’això. És un dibuix. Els lectors de pantalla hi veuen una imatge (amb sort) o directament res. El desenvolupador ha de reconstruir la capa semàntica des de zero.

Alhora, els gràfics sovint són el contingut més important d’una pàgina. Un gràfic de barres que mostra els ingressos mensuals, un gràfic de línies que segueix el creixement d’usuaris, un gràfic circular que desglossa la distribució per categories: sovint són el motiu pel qual l’usuari és a la pàgina. Excloure’n una part significativa dels visitants és un problema seriós, no una molèstia menor.

El problema del color: no confiïs mai només en el color

L’error d’accessibilitat més comú en gràfics és utilitzar el color com a única manera de distingir sèries de dades o categories.

Un gràfic de línies amb quatre línies distingides només pel color —vermell, blau, verd, taronja— és il·legible per a molts usuaris amb deficiència en la visió del color, i completament mancat de significat per a qualsevol persona que utilitzi un mode d’alt contrast o una pantalla en escala de grisos.

La solució és la codificació redundant: utilitza el color més almenys una altra propietat visual.

Gràfics de línies: utilitza patrons de traç diferents juntament amb els colors (continu, discontinu, puntejat, punt-ratlla)
Gràfics de barres: utilitza textures o patrons juntament amb els colors, o afegeix etiquetes de dades directament sobre les barres
Gràfics de dispersió: utilitza formes de marcador diferents (cercle, quadrat, triangle, rombe) juntament amb els colors
Gràfics circulars: afegeix etiquetes de text dins de cada sector o al costat — no confiïs mai només en una llegenda

Això entra dins del criteri 1.4.1 Ús del color (nivell A) de les WCAG 2.2: el color no pot ser l’únic mitjà per transmetre informació.

Contrast per als gràfics

Els elements visuals que no són text, com les barres dels gràfics, els traços de les línies i els punts de dades, han de complir un contrast de 3:1 respecte del fons segons el criteri 1.4.11 Contrast dels elements no textuals (nivell AA). Comprova la paleta dels teus gràfics amb un verificador de contrast: moltes paletes de marca que semblen correctes en àrees grans no compleixen aquest requisit en mides més petites.

El text dins dels gràfics —etiquetes dels eixos, etiquetes de dades, llegendes— ha de complir els mateixos requisits de contrast que el text del cos: 4.5:1 per al text normal, 3:1 per al text gran segons el criteri 1.4.3 Contrast mínim.

Proporcionar alternatives textuals

Cada gràfic necessita una alternativa textual que transmeti les dades que mostra. La forma exacta que pren depèn de com de complexes són les dades.

Gràfics simples: text alternatiu descriptiu

Per a un gràfic de barres amb cinc valors, un atribut alt ben escrit pot resumir la conclusió principal:

<img
  src="monthly-revenue.png"
  alt="Monthly revenue Q1 2025: Jan £42k, Feb £38k, Mar £51k,
       Apr £49k, May £56k. Steady upward trend from February onwards."
>

El text alternatiu aquí fa dues coses: indica els punts de dades i resumeix la conclusió clau. No et limitis a descriure el gràfic visualment (“un gràfic de barres que mostra els ingressos”). Descriu el que el gràfic comunica.

Gràfics complexos: taules de dades complementàries

Quan un gràfic conté més dades de les que caben en un atribut alt, proporciona una taula de dades accessible a prop. Això també serveix a les persones que prefereixen les dades tabulars als formats visuals. La taula pot estar amagada de manera predeterminada, però ha de ser accessible:

<figure>
  <figcaption>Revenue by region, Q1 2025</figcaption>
  <svg aria-labelledby="chart-title" aria-describedby="chart-desc" role="img">
    <title id="chart-title">Revenue by region, Q1 2025</title>
    <desc id="chart-desc">Bar chart showing UK leading with £180k,
    followed by DE at £124k, FR at £98k, and NL at £71k.</desc>
    <!-- chart content -->
  </svg>
  <details>
    <summary>View as table</summary>
    <table>
      <caption>Revenue by region, Q1 2025</caption>
      <thead><tr><th>Region</th><th>Revenue</th></tr></thead>
      <tbody>
        <tr><td>UK</td><td>£180,000</td></tr>
        <tr><td>DE</td><td>£124,000</td></tr>
        <tr><td>FR</td><td>£98,000</td></tr>
        <tr><td>NL</td><td>£71,000</td></tr>
      </tbody>
    </table>
  </details>
</figure>

Patrons específics per a SVG

Els gràfics SVG renderitzats en línia (en comptes de com a fitxers d’imatge) es poden fer directament accessibles amb ARIA. Patrons clau:

Afegeix role="img" a l’element <svg>
Proporciona un <title> com a primer fill de <svg> i enllaça’l amb aria-labelledby
Afegeix un <desc> per a descripcions més llargues i enllaça’l amb aria-describedby
Marca els elements decoratius (línies de quadrícula, marques dels eixos) amb aria-hidden="true" per reduir el soroll

Per als gràfics interactius on els usuaris poden seleccionar punts de dades, cada element interactiu necessita un rol, un nom i suport de teclat adequats.

Navegació amb teclat per a gràfics interactius

Si els teus gràfics són interactius —tooltips en passar el ratolí, segments clicables, selecció i zoom— han de ser completament operables amb teclat segons el criteri 2.1.1 Teclat (nivell A).

Per a gràfics amb molts punts de dades, implementa un patró de tabindex itinerant (roving): només un element del gràfic és a la seqüència de tabulació en cada moment, i les tecles de fletxa mouen el focus entre els punts de dades dins del gràfic.

<!-- Each bar is a button, navigable with arrow keys -->
<g role="group" aria-label="Monthly revenue bars">
  <rect
    role="button"
    tabindex="0"
    aria-label="January: £42,000"
    onkeydown="handleChartKey(event)"
    ...
  />
</g>

Els tooltips que només apareixen en passar el ratolí també han d’aparèixer quan l’element rep el focus del teclat. Un tooltip visible només per als usuaris de ratolí és un incompliment d’accessibilitat.

Triar el tipus de gràfic adequat

Alguns tipus de gràfic són inherentment més accessibles que d’altres. Quan puguis triar:

Tipus de gràfic	Accessibilitat	Notes
Gràfic de barres	Alta	Les quantitats són fàcils de codificar amb etiquetes; permet un bon suport de teclat
Gràfic de línies	Alta	Utilitza patrons de traç diferents; anota els punts clau
Taula	La més alta	La més fàcil de fer accessible; sovint la millor opció per a dades
Gràfic de dispersió	Mitjana	Requereix una diferenciació acurada dels marcadors; la navegació amb teclat és complexa
Mapa de calor	Baixa	Depèn del color per naturalesa; proporciona sempre una taula alternativa
Circular/anell	Baixa	Difícil de comparar valors; evita’l per a més de 3-4 segments

En cas de dubte, una taula ben formatada és gairebé sempre més accessible que un gràfic — i sovint més fàcil de llegir independentment de la discapacitat. No utilitzis un gràfic perquè sembla modern; utilitza’l quan realment ajudi els usuaris a entendre una tendència o una comparació més ràpidament que les dades tabulars.

Com provar els teus gràfics

Els escàners automàtics d’accessibilitat poden comprovar l’absència d’atributs alt i alguns patrons ARIA, però no poden verificar que les dades del gràfic siguin significatives, que la navegació amb teclat funcioni correctament o que el gràfic tingui sentit per a un usuari de lector de pantalla. Prova amb:

Un lector de pantalla (NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari): navega fins al gràfic i verifica què s’anuncia
Només amb teclat: tabula fins al gràfic i confirma que tots els elements interactius són accessibles i operables amb el teclat
Simulació de daltonisme: utilitza Chrome DevTools (Rendering > Emulate vision deficiency) per veure com es veu el gràfic amb diferents tipus de deficiència en la visió del color
Zoom al 200%: verifica que les etiquetes i llegendes no se superposin ni quedin tallades

El nostre servei d’avaluació amb lector de pantalla prova els gràfics amb usuaris reals de tecnologies d’assistència — la manera més ràpida de descobrir què experimenten realment els teus usuaris.