Strumenti per la visualizzazione dati accessibile nel 2026:
uno stack funzionante
Cinque librerie dominano la conversazione moderna sulla visualizzazione dei dati, ma solo alcune di esse trattano uno screen reader come un consumatore di prima classe. Questo è il foglio di valutazione di un ingegnere che lavora sul campo, scritto per i team che distribuiscono grafici in produzione nel 2026.
1. I cinque assi che stabiliscono se un grafico è accessibile
L’espressione «grafico accessibile» cela una serie di requisiti sottilmente diversi. Un grafico a barre può essere renderizzato come SVG con un contrasto cromatico perfetto ed essere comunque irraggiungibile da un utente che naviga solo con la tastiera. Può essere navigabile da tastiera e tuttavia non annunciare nulla di utile a uno screen reader. Può annunciare i valori in modo chiaro e lasciare comunque un utente ipovedente senza risorse al primo tooltip. Per confrontare le librerie in modo equo, valutiamo ciascuna rispetto a cinque assi indipendenti che rispecchiano direttamente l’esperienza di un utente reale di tecnologia assistiva con una visualizzazione.
Questi cinque assi non sono un elenco di preferenze personali. Sono la traduzione pratica dei criteri di successo WCAG 2.2 (1.4.11 contrasto per elementi non testuali, 2.1.1 tastiera, 4.1.2 nome ruolo valore), delle linee guida ARIA Authoring Practices sui grafici e del documento «Data Visualization Accessibility» della W3C Research Questions Task Force che circola dal 2023. Ogni libreria di grafici produce SVG; ogni libreria renderizza una legenda; ogni libreria ha un’opinione sui colori. Ciò che le distingue sono i default — il grafico che si ottiene scrivendo la quantità minima sensata di codice.
1. SVG con ARIA semantico. La libreria produce SVG (non canvas) e quell’SVG include ruoli, etichette e struttura di raggruppamento significativi anziché nidi anonimi di <g>?
2. Palette CVD-safe di default. Le palette categoriali e sequenziali sono testate per il daltonismo di default, o è necessario sapere di doverle sostituire?
3. Punti dati navigabili da tastiera. Un utente vedente che naviga solo con la tastiera può portare il focus sul grafico, spostarsi tra i segni con le frecce e leggere il valore di ciascun segno?
4. Gerarchia di descrizione per screen reader. È presente un titolo, un riassunto di una frase e annunci per serie/punto — non solo un singolo dump di alt-text?
5. Vista tabellare alternativa. I dati sottostanti sono disponibili come tabella HTML collegata al, o renderizzata accanto al, grafico per gli utenti che preferiscono la consultazione tabellare?
«Un grafico distribuito con contrasto perfetto e una palette CVD-safe ma senza modello da tastiera è un grafico che è stato renderizzato per metà del pubblico.»
2. Le cinque librerie in esame
Cinque librerie coprono la stragrande maggioranza del nuovo lavoro di grafica nel 2026: Vega-Lite, Plotly, Observable Plot, Apache ECharts e D3 con codice personalizzato. Occupano posizioni diverse sull’asse dell’astrazione — Vega-Lite è la più dichiarativa, D3 la più imperativa — e ciascuna porta una postura diversa verso l’accessibilità. Trattiamo D3 separatamente perché «D3 + codice personalizzato» è una proposta ingegneristica fondamentalmente diversa: l’accessibilità che si ottiene è quella che si scrive.
Nessuna di queste librerie è ostile all’accessibilità. Tutte producono SVG (Plotly e ECharts possono anche emettere canvas; valutiamo la modalità SVG). Tutte accettano palette di colori arbitrarie. La domanda è cosa si ottiene scrivendo la quantità minima sensata di codice, e quanto recablaggio serve per passare da quel default a un grafico che supera effettivamente WCAG 2.2 AA.
La valutazione «zero dot» per D3 non è una critica alla libreria — è la descrizione onesta di ciò che si ottiene da una build D3 vanilla. D3 è una raccolta di primitive. L’accessibilità in un grafico D3 è quella che scrive l’autore. Un grafico D3 realizzato da un ingegnere che conosce ARIA può essere il grafico più accessibile della pagina; un grafico D3 realizzato senza quella conoscenza è quasi sempre il grafico meno accessibile della pagina.
3. La matrice di valutazione: libreria per funzionalità di accessibilità
I cinque assi della prima sezione, valutati rispetto alle cinque librerie della seconda. «Sì» significa che il comportamento predefinito supera l’asse; «Parziale» significa che la libreria espone gli hook giusti ma non li attiva di default; «Manuale» significa che l’ingegnere deve scrivere il codice rilevante da zero.
| Vega-Lite | Plotly.js | Observable Plot | Apache ECharts | D3 + custom | |
|---|---|---|---|---|---|
| Output SVG con ARIA semantico | Sì (SVG, gruppi con titolo) | Sì (SVG, etichette ARIA) | Sì (SVG, ruoli mark) | Parziale (canvas di default; renderer SVG opt-in) | Manuale |
| Palette CVD-safe di default | Sì (Tableau 10 + viridis) | Parziale (palette Plotly di default; palette CVD opt-in) | Sì (Observable categorical10) | Parziale (schema di default non testato per CVD) | Manuale |
| Punti dati navigabili da tastiera | Parziale (focus sulla legenda; i segni richiedono configurazione) | Sì (navigazione con tasti freccia nella 2.x) | Parziale (il plugin tip dà focus; i segni sono manuali) | Parziale (modulo a11y opt-in) | Manuale |
| Gerarchia di descrizione per screen reader | Sì (proprietà description nella specifica) | Parziale (singolo titolo; per-punto opt-in) | Sì (segni ariaLabel + ariaDescription) | Parziale (il modulo a11y emette alt per serie) | Manuale |
| Vista tabellare alternativa | Parziale (tabella dati facile da renderizzare) | Parziale (esportazione CSV; nessuna tabella nel DOM) | Parziale (helper data(), nessuna tabella automatica) | Parziale (la toolbox supporta la vista dati) | Manuale |
Vega-Lite e Observable Plot guidano sui default dichiarativi. Plotly guida sulla navigazione da tastiera integrata. ECharts ha il modulo di accessibilità opt-in più completo tra tutte le librerie in elenco — ma solo se lo si abilita. D3 non dà nulla e dà tutto: ogni cella è «manuale» perché la libreria non ha opinioni. Nessuna di queste librerie è una soluzione a una sola riga; tutte sono praticabili con le giuste intenzioni.
4. Grafico buono, grafico cattivo: gli stessi dati, due modi
La matrice mostra ciò che espone ogni libreria; questa sezione mostra ciò che scrive concretamente un ingegnere. Stessi dati, due implementazioni. La versione «cattiva» è veloce da produrre e appare bene su uno schermo da 27 pollici. La versione «buona» richiede 12 righe di codice in più e supera ogni asse della matrice.
// Vega-Lite — solo default
{
"data": { "url": "complaints.csv" },
"mark": "bar",
"encoding": {
"x": { "field": "category", "type": "nominal" },
"y": { "field": "count", "type": "quantitative" },
"color": { "field": "category" }
}
}Viene renderizzato. Appare bene. Nessun titolo del grafico per lo screen reader. Nessuna descrizione. Nessun modello da tastiera sui segni. Schema di colori di default non testato per CVD con il numero di categorie effettivo. Nessuna tabella di fallback.
// Vega-Lite — default accessibili
{
"title": "Reclami per superficie, 2024",
"description":
"Grafico a barre di 4.605 reclami per accessibilità web, classificati per superficie. Il più alto: moduli (1.940).",
"data": { "url": "complaints.csv" },
"mark": { "type": "bar", "ariaRoleDescription": "bar" },
"encoding": {
"x": { "field": "category", "type": "nominal",
"axis": { "labelAngle": -30 } },
"y": { "field": "count", "type": "quantitative",
"title": "Reclami" },
"color": {
"field": "category",
"scale": { "scheme": "tableau10" },
"legend": { "title": "Superficie" }
},
"tooltip": [
{ "field": "category", "title": "Superficie" },
{ "field": "count", "title": "Reclami" }
]
},
"usermeta": { "embedOptions": { "ariaLabel": "Grafico reclami" } }
}Titolo, descrizione, palette CVD-safe, asse nominato, campi tooltip nominati, descrizione del ruolo ARIA sul segno. Abbinato a un <table> renderizzato dallo stesso dataset, questo supera ogni asse della matrice senza uscire dalla grammatica dichiarativa.
Il grafico buono non è un grafico diverso. È lo stesso grafico con i default impliciti resi espliciti, il titolo scritto, la palette nominata, il ruolo per-segno specificato, e i dati offerti anche come tabella. Questa è tutta l’arte.
Nessuna delle cinque librerie distribuisce di default una modalità «renderizza questo grafico come tabella». Il pattern funzionante è: collegare gli stessi dati a due componenti — il grafico e una <table> HTML sotto di esso, spesso nascosta visivamente ma esposta alla tecnologia assistiva con un toggle «Mostra tabella dati» che capovolge un attributo hidden. Questo pattern richiede circa 20 righe di codice framework per grafico e si ripaga alla prima sessione di ricerca sugli utenti.
5. Indicazioni concrete per caso d’uso
La scelta della libreria nel 2026 riguarda principalmente l’adattamento al flusso di lavoro. Le cinque librerie in esame sono tutte praticabili. La domanda è quale corrisponde al tipo di grafici che si sta effettivamente distribuendo. Cinque casi d’uso comuni, cinque scelte, con la migliore alternativa nominata.
Grafici editoriali / data journalism (un grafico, curato)
Scelta: Observable Plot, con Vega-Lite come valida alternativa. L’API basata su mark di Plot fornisce etichette ARIA per segno gratuitamente, la palette categoriale è testata per CVD e l’output SVG è letto in modo chiaro. Vega-Lite è la seconda scelta qui perché la proprietà description è il riassunto per screen reader più pulito per singolo attributo in qualsiasi libreria — ma Plot vince sull’ergonomia di default per pezzi editoriali singoli.
Dashboard creati da analisti (molti grafici, dichiarativi)
Scelta: Vega-Lite, con Observable Plot come valida alternativa. La grammatica a specifica di Vega-Lite consente agli analisti di comporre 30 grafici in un notebook senza scrivere JavaScript, e le proprietà title + description dello schema forniscono la gerarchia per screen reader senza plumbing aggiuntivo. Abbinare ogni grafico a una tabella dati renderizzata da Vega per superare l’asse della tabella alternativa.
Dashboard scientifici / di tipo BI (esplorazione interattiva)
Scelta: Plotly.js, con ECharts come valida alternativa. Plotly è l’unica libreria in elenco che distribuisce la navigazione con tasti freccia tra i segni come default nella linea 2.x. Se il pubblico si aspetta di passare il mouse, ingrandire e approfondire, il modello da tastiera integrato di Plotly è il fattore decisivo. ECharts recupera se si abilita il modulo aria — ma è necessario abilitarlo esplicitamente.
Dashboard operativi ad alta densità (centinaia di punti, performance-critical)
Scelta: Apache ECharts con renderer SVG + modulo aria abilitato, con Plotly come valida alternativa. ECharts è la storia di performance più solida in questo gruppo per grafici molto densi e il modulo aria produce testo alt per serie che gli screen reader gestiscono in modo competente. Disattivare il renderer canvas; canvas è più veloce ma l’albero di accessibilità scompare.
Grafici editoriali su misura che nessuna libreria renderizza (personalizzati, unici)
Scelta: D3 con uno strato di accessibilità scritto a mano. Lo strato scritto a mano è imprescindibile: un <title> + <desc> alla radice SVG, role=“img” per segno con aria-label, un modello di focus su ogni segno focalizzabile e una <table> adiacente renderizzata dallo stesso dataset. D3 è lo strumento giusto quando il grafico non esiste davvero altrove; è quello sbagliato quando il grafico è un diagramma a barre e qualcuno ha scelto D3 per abitudine.
Il grafico all’interno di una libreria di grafici è raramente l’unica cosa sulla pagina. Tooltip che appaiono solo al passaggio del mouse e non al focus, legende che sono <div> invece di <ul>, anelli di focus sovrascritti nel foglio di reset della pagina, campioni di colore con contrasto insufficiente rispetto allo sfondo della pagina — questi sono fallimenti a livello di pagina che nessuna libreria di grafici correggerà automaticamente. La libreria fornisce i segni; la pagina fornisce il resto.
Conclusione: lo stack funzionante è quello che si scrive
Nessuna delle cinque librerie in esame è la risposta sbagliata. Tutte superano la maggior parte degli assi con una piccola dose di intenzione. Il singolo predittore più affidabile di un grafico accessibile nel 2026 non è la libreria nella riga di import — è se il team ha scritto, nello stesso posto dove si trova il design system, cosa significa «grafico accessibile» in questa organizzazione. Titolo. Descrizione. Palette. Modello da tastiera. Tabella alternativa. Cinque righe in un CONTRIBUTING.md; la differenza tra un grafico che viene distribuito e un grafico che arriva a destinazione.
Scegliere la libreria adatta al flusso di lavoro, attivare i suoi default di accessibilità, abbinare ogni grafico a una tabella dati e sottoporre ad audit il chrome della pagina attorno al grafico con la stessa cura del grafico stesso. Il grafico predefinito in qualsiasi di queste librerie può essere reso accessibile. Il grafico predefinito in nessuna di queste librerie è accessibile senza intenzione.
«La libreria fornisce i segni; la pagina fornisce il resto.»