Creare grafici che funzionano per tutti

Il problema dei grafici

Grafici e diagrammi sono oggetti intrinsecamente visivi. Codificano le informazioni attraverso forma, posizione e colore — tre canali che risultano privi di significato o distorti per una parte significativa del tuo pubblico.

Circa l’8% degli uomini ha una qualche forma di deficit della visione dei colori. Gli utenti di screen reader non ricevono alcuna informazione significativa da un grafico a barre in SVG, a meno che lo sviluppatore non l’abbia fornita esplicitamente. E gli utenti che navigano da tastiera spesso trovano i grafici interattivi completamente irraggiungibili.

Il risultato: la visualizzazione dei dati è probabilmente l’ambito del web design in cui il divario tra ciò che sperimentano gli utenti vedenti e ciò che sperimentano tutti gli altri è più ampio. Ed è un divario che le organizzazioni raramente notano, perché gli audit di accessibilità si concentrano su moduli e navigazione prima di arrivare ai grafici della pagina dei report.

Questa guida spiega cosa richiede davvero una visualizzazione di dati accessibile — non una checklist, ma una comprensione del perché i grafici falliscono e di cosa fare al riguardo.

Perché i grafici sono particolarmente difficili

La maggior parte degli elementi HTML ha un ruolo, un nome e uno stato nativi che le tecnologie assistive comprendono. Un <button> è un pulsante. Una <table> è una tabella con righe e colonne. Un campo di modulo ha un’etichetta.

Un grafico renderizzato come SVG o canvas non ha nulla di tutto questo. È un disegno. Gli screen reader vedono un’immagine (se sei fortunato) o niente del tutto. Lo sviluppatore deve ricostruire da zero il livello semantico.

Allo stesso tempo, i grafici sono spesso il contenuto più importante di una pagina. Un grafico a barre che mostra il fatturato mensile, un grafico a linee che traccia la crescita degli utenti, un grafico a torta che scompone la distribuzione per categoria — spesso sono proprio il motivo per cui l’utente si trova sulla pagina. Escluderli da una parte significativa dei visitatori è un problema serio, non un inconveniente di poco conto.

Il problema del colore: non affidarti mai solo al colore

L’errore di accessibilità più comune nei grafici è usare il colore come unico modo per distinguere serie di dati o categorie.

Un grafico a linee con quattro linee distinte solo dal colore — rosso, blu, verde, arancione — è illeggibile per molti utenti con deficit della visione dei colori, e completamente privo di significato per chiunque usi una modalità ad alto contrasto o uno schermo in scala di grigi.

La soluzione è la codifica ridondante: usa il colore più almeno un’altra proprietà visiva.

• Grafici a linee: usa tratteggi diversi insieme ai colori (linea continua, tratteggiata, punteggiata, tratto-punto)
• Grafici a barre: usa texture o pattern insieme ai colori, oppure aggiungi etichette con i dati direttamente sulle barre
• Grafici a dispersione: usa forme di marcatori diverse (cerchio, quadrato, triangolo, rombo) insieme ai colori
• Grafici a torta: aggiungi etichette di testo all’interno o accanto a ogni spicchio — non affidarti mai alla sola legenda

Tutto questo rientra nel criterio 1.4.1 Uso del colore (Livello A) delle WCAG 2.2: il colore non deve essere l’unico mezzo per trasmettere un’informazione.

Il contrasto nei grafici

Gli elementi visivi non testuali come le barre dei grafici, i tratti delle linee e i punti dati devono raggiungere un contrasto di 3:1 rispetto allo sfondo, secondo il criterio 1.4.11 Contrasto in contenuti non testuali (Livello AA). Testa la palette dei tuoi grafici con uno strumento di verifica del contrasto — molte palette di brand che sembrano perfette su grandi superfici non superano questo requisito a dimensioni ridotte.

Il testo all’interno dei grafici — etichette degli assi, etichette dei dati, legende — deve rispettare gli stessi requisiti di contrasto del testo normale: 4,5:1 per il testo normale, 3:1 per il testo di grandi dimensioni secondo il criterio 1.4.3 Contrasto minimo.

Fornire alternative testuali

Ogni grafico ha bisogno di un’alternativa testuale che trasmetta i dati che mostra. La forma esatta dipende dalla complessità dei dati.

Grafici semplici: testo alternativo descrittivo

Per un grafico a barre con cinque valori, un attributo alt ben scritto può riassumere il risultato principale:

<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."
>

Il testo alternativo qui fa due cose: riporta i punti dati e riassume l’informazione chiave. Non limitarti a descrivere il grafico visivamente (“un grafico a barre che mostra il fatturato”). Descrivi ciò che il grafico comunica.

Grafici complessi: tabelle di dati supplementari

Quando un grafico contiene più dati di quanti ne possa contenere un attributo alt, fornisci nelle vicinanze una tabella di dati accessibile. Questo aiuta anche le persone che preferiscono i dati in formato tabellare a quelli visivi. La tabella può essere nascosta di default ma raggiungibile:

<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>

Pattern specifici per SVG

I grafici SVG renderizzati inline (anziché come file immagine) possono essere resi direttamente accessibili con ARIA. Pattern chiave:

• Aggiungi role="img" all’elemento <svg>
• Fornisci un <title> come primo figlio di <svg> e collegalo con aria-labelledby
• Aggiungi un <desc> per le descrizioni più lunghe e collegalo con aria-describedby
• Contrassegna gli elementi decorativi (linee della griglia, tacche) con aria-hidden="true" per ridurre il rumore

Per i grafici interattivi in cui gli utenti possono selezionare punti dati, ogni elemento interattivo ha bisogno di un ruolo, un nome e un supporto da tastiera adeguati.

Navigazione da tastiera per i grafici interattivi

Se i tuoi grafici sono interattivi — tooltip al passaggio del mouse, segmenti cliccabili, selezione e zoom — devono essere completamente utilizzabili da tastiera secondo il criterio 2.1.1 Tastiera (Livello A).

Per i grafici con molti punti dati, implementa il pattern del roving tabindex: un solo elemento del grafico alla volta fa parte della sequenza di tabulazione, e i tasti freccia spostano il focus tra i punti dati all’interno del grafico.

<!-- 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>

I tooltip che compaiono solo al passaggio del mouse devono comparire anche al focus da tastiera. Un tooltip visibile solo agli utenti che usano il mouse è un errore di accessibilità.

Scegliere il tipo di grafico giusto

Alcuni tipi di grafico sono intrinsecamente più accessibili di altri. Quando puoi scegliere:

Tipo di grafico	Accessibilità	Note
Grafico a barre	Alta	Quantità facili da codificare con etichette; buon supporto da tastiera possibile
Grafico a linee	Alta	Usa tratteggi diversi; annota i punti chiave
Tabella	Massima	La più facile da rendere accessibile; spesso la scelta giusta per i dati
Grafico a dispersione	Media	Richiede un’attenta differenziazione dei marcatori; navigazione da tastiera complessa
Heatmap	Bassa	Dipendente dal colore per natura; fornisci sempre una tabella alternativa
Torta/anello	Bassa	Valori difficili da confrontare; da evitare oltre i 3-4 segmenti

Nel dubbio, una tabella ben formattata è quasi sempre più accessibile di un grafico — e spesso più facile da leggere a prescindere dalla disabilità. Non usare un grafico perché sembra moderno; usalo quando aiuta davvero gli utenti a comprendere una tendenza o un confronto più velocemente di quanto farebbero dei dati tabellari.

Testare i tuoi grafici

Gli scanner di accessibilità automatici possono rilevare attributi alt mancanti e alcuni pattern ARIA, ma non possono verificare che i dati del grafico siano significativi, che la navigazione da tastiera funzioni correttamente o che il grafico abbia senso per un utente di screen reader. Testa con:

1. Uno screen reader (NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari): naviga fino al grafico e verifica cosa viene annunciato
2. Solo tastiera: raggiungi il grafico con Tab e conferma che tutti gli elementi interattivi siano raggiungibili e utilizzabili da tastiera
3. Simulazione del daltonismo: usa Chrome DevTools (Rendering > Emulate vision deficiency) per vedere come appare il grafico con i diversi tipi di deficit della visione dei colori
4. Zoom al 200%: verifica che etichette e legende non si sovrappongano né vengano tagliate

Il nostro servizio di valutazione con screen reader testa i grafici con utenti reali di tecnologie assistive — il modo più rapido per scoprire cosa sperimentano davvero i tuoi utenti.