Blocchi di Grafici: Grafici Accessibili con Assi Onesti

Un blocco grafico è un display di dati circoscritto che combina un grafico con il suo punto chiave, titolo, etichette, fonte, periodo e alternativa dati accessibile. Usalo quando la forma dei dati risponde alla domanda più velocemente di una riga di valori esatti.

Perché questo elemento è importante

I grafici sfruttano il riconoscimento visivo di pattern. Un lettore può individuare un aumento, un divario, un raggruppamento o un cambiamento di pendenza prima di confrontare gli stessi valori cella per cella. Questo è utile quando il pattern — non la consultazione precisa — è il punto centrale. È anche pericoloso: assi tagliati, intervalli disuguali o effetti d’area possono far sembrare decisiva una piccola differenza. Un grafico merita il suo posto solo quando riduce lo sforzo senza alterare le prove.

La psicologia del lettore rende essenziale il punto chiave scritto. Le persone possono ricordare una direzione o una dimensione relativa più facilmente di una nota a piè di pagina. Enuncia la conclusione circoscritta nel testo, includendo la popolazione e il periodo quando necessario. Non rivendicare mai una causalità da una correlazione o un trend generale da un intervallo selezionato.

L’estraibilità automatica richiede che nomi di serie, etichette, valori, unità, fonte, periodo e conclusione siano presenti come testo. Un crawler o un motore di risposta AI potrebbe non interpretare un percorso SVG, una tela canvas, uno screenshot, uno stato hover o una legenda cromatica. Il blocco quindi abbina la parte visiva a dati ordinati per tecnologia assistiva, indicizzazione, verifica e riutilizzo.

Le regole di scrittura degli elementi hanno precedenza: seleziona questo elemento perché lo scopo di un passaggio è rivelare un pattern quantitativo, non perché un grafico decorerebbe la pagina. Se il compito è una consultazione esatta o un confronto punto per punto, usa una tabella anche quando il software per grafici è disponibile.

Quando usarlo

Usa un grafico quando il lettore deve vedere una di quattro forme: cambiamento in una sequenza ordinata, differenze tra un insieme gestibile di categorie, distribuzione di osservazioni o relazione tra due variabili quantitative. Un grafico a linee può rivelare una direzione nel tempo; un grafico a barre può classificare le categorie; un istogramma può rivelare la distribuzione; e un diagramma a dispersione può rivelare associazioni e valori anomali. Il dataset deve essere sufficientemente completo, misurato in modo coerente e pertinente all’affermazione.

Un semplice test separa il grafico dalla tabella: se il lettore dovrebbe notare prima un pattern, scegli un grafico; se dovrebbe trovare un valore esatto, scegli una tabella. Se entrambi contano, includi una tabella compatta all’interno del blocco grafico in modo che i due output non possano divergere.

Gli errori comuni includono:

• Due valori: scrivi una frase o un piccolo confronto. Due barre raramente rivelano un pattern più direttamente.
• Un elenco lungo di categorie: usa una tabella raggruppata. Trenta barre creano problemi di etichette e layout su mobile.
• Poche metriche principali: usa un blocco statistico quando le cifre sono punti salienti indipendenti piuttosto che una serie unica.
• Un processo o una cronologia: usa una linea temporale quando i segni non codificano quantità.
• Un’affermazione causale da un’associazione: un diagramma a dispersione può mostrare che due variabili si muovono insieme; non può stabilire che una abbia causato l’altra.
• Una “storia di dati” decorativa: se rimuovere il grafico non fa perdere alcuna conclusione, rimuovilo.
• Un confronto con criteri qualitativi lunghi: usa una tabella comparativa perché categorie come la politica di supporto o l’idoneità all’implementazione non possono essere codificate onestamente come lunghezza di barra.

Dove posizionarlo

Posiziona il grafico dopo il paragrafo che introduce la domanda, la popolazione, la misura e il periodo. Inserisci il punto chiave direttamente prima o dopo, poi spiega implicazioni e limitazioni. Nella ricerca, ogni grafico appartiene accanto alla sua scoperta. In un caso di studio, stabilisci la baseline e l’intervento prima di mostrare il cambiamento.

Mantieni titolo, elemento visivo, legenda, punto chiave, alternativa dati, fonte e note entro un unico confine di figura. Le note a piè di pagina possono seguire la figura, ma un annuncio pubblicitario, un modulo di iscrizione o un’immagine non correlata non possono interromperla. La fonte deve essere visibile senza aprire l’alternativa dati.

Non posizionarlo accanto a un grafico ugualmente prominente, una tabella indipendente o un blocco statistico che ripete i suoi dati, una tabella di prezzi, un carosello o un invito all’azione ad alta enfasi. Questi accostamenti competono o creano molteplici fonti di verità. Separa i display di dati con spiegazioni.

Anatomia

Lo screenshot etichettato deve identificare queste regioni:

1. Punto chiave: una frase che enuncia il pattern senza l’immagine.
2. Titolo della figura: una descrizione neutra di misura, popolazione e periodo.
3. Grafico: la regione in cui posizione, lunghezza o direzione codifica i valori.
4. Assi e scale: etichette visibili, unità, tacche, intervalli e linea di base.
5. Etichette di serie: etichette dirette quando possibile; altrimenti una legenda che non sia solo cromatica.
6. Annotazione: una nota opzionale legata a un punto dati, mai un sostituto della metodologia.
7. Alternativa dati: una tabella o un testo ordinato contenente i valori tracciati.
8. Didascalia e fonte: ambito, provenienza, periodo di rendicontazione e eventuale nota di calcolo.

Esempi di design

Ogni variante utilizza segni bidimensionali, unità visibili, un punto chiave, dati di origine e un’alternativa accessibile. Non esiste una variante 3D, con pittogrammi, indicatori a gauge o doppio asse perché decorazioni e scale concorrenti distorcono il confronto.

Grafico a linee: usalo per valori misurati a intervalli ordinati coerenti, solitamente temporali. Le osservazioni mancanti devono apparire come interruzioni, non come connessioni inventate. Più di quattro serie richiede normalmente di dividere il grafico o scegliere una tabella.

Grafico a barre: usalo per confronto o classificazione tra categorie discrete. Inizia l’asse quantitativo a zero perché la lunghezza delle barre rappresenta la grandezza. Preferisci le barre orizzontali quando le etichette sono lunghe e ordinale per valore a meno che un ordine naturale porti significato.

Diagramma a dispersione: usalo per la relazione tra due variabili quantitative. Mostra le osservazioni individuali, nomina entrambe le misure, dichiara eventuali linee di tendenza adattate ed evita un linguaggio causale a meno che il disegno di ricerca non lo supporti.

Grafico a barre impilate: usalo quando sia il totale che la composizione contano in un numero ridotto di gruppi. Mantieni stabile l’ordine dei segmenti e limita la pila a quattro categorie. Se i lettori devono principalmente confrontare ogni componente, usa invece barre raggruppate o piccoli multipli.

Parametri

“Fonte” di seguito indica la posizione autoriale da cui il renderer ottiene il campo, non il fornitore di prove citato dal grafico.

show-data=false è consentito solo quando una tabella dati equivalente o un’alternativa testuale valore per valore completa è già associata programmaticamente alla figura. Non è mai una licenza per pubblicare un grafico puramente visivo.

Sintassi ed esempi di codice

Tutte e tre le notazioni preservano lo stesso titolo, punto chiave, dataset, scala, fonte, periodo e testo alternativo. Le figure sono illustrative.

Direttiva Markdown portabile

:::chart-block{type=bar y-label="Richieste" y-min=0 source="Dataset editoriale illustrativo" period="Q1–Q4 2026" alt="Le richieste diminuiscono in ogni trimestre, da 120 nel Q1 a 72 nel Q4."}
## Richieste di supporto illustrative per trimestre

Punto chiave: Le richieste diminuiscono ogni trimestre, da 120 nel Q1 a 72 nel Q4.

| Trimestre | Richieste |
|---|---:|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
:::

Il primo titolo corrisponde a title; il punto chiave e la tabella dati canonica corrispondono ai campi del corpo.

Shortcode Hugo

L’adattatore Hugo utilizza parametri nominati e deriva il grafico e la tabella da un unico dataset nel corpo. Questa notazione specifica la mappatura prevista.

{{< chart-block type="bar" yLabel="Richieste" yMin="0" source="Dataset editoriale illustrativo" period="Q1–Q4 2026" alt="Le richieste diminuiscono in ogni trimestre, da 120 nel Q1 a 72 nel Q4." >}}
## Richieste di supporto illustrative per trimestre

Punto chiave: Le richieste diminuiscono ogni trimestre, da 120 nel Q1 a 72 nel Q4.

| Trimestre | Richieste |
|---|---:|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
{{< /chart-block >}}

Blocco WordPress

<!-- wp:amicited/chart-block {"type":"bar","title":"Richieste di supporto illustrative per trimestre","yLabel":"Richieste","yMin":0,"source":"Dataset editoriale illustrativo","period":"Q1–Q4 2026","alt":"Le richieste diminuiscono in ogni trimestre, da 120 nel Q1 a 72 nel Q4.","takeaway":"Le richieste diminuiscono ogni trimestre, da 120 nel Q1 a 72 nel Q4."} -->
<table><thead><tr><th>Trimestre</th><th>Richieste</th></tr></thead><tbody><tr><th>Q1</th><td>120</td></tr><tr><th>Q2</th><td>108</td></tr><tr><th>Q3</th><td>84</td></tr><tr><th>Q4</th><td>72</td></tr></tbody></table>
<!-- /wp:amicited/chart-block -->

Il blocco può renderizzare SVG o canvas, ma l’output salvato e renderizzato lato server deve conservare il punto chiave e la tabella. JavaScript può migliorare l’interazione, mai fornire le uniche etichette o valori.

Esempi

Buono: il grafico e le parole raccontano la stessa storia circoscritta

Punto chiave: Nel dataset illustrativo, il tempo di risoluzione mediano scende da 18 ore a gennaio a 12 ore ad aprile; il grafico non stabilisce il perché.

Il grafico a linee utilizza intervalli mensili uniformi e un asse “Ore” etichettato da 10 a 20. Questa scala lineare non-zero dichiarata è appropriata perché la posizione, non la lunghezza delle barre, codifica i valori. La tabella espone ogni punto e il testo non attribuisce il calo a un intervento.

Cattivo: il grafico crea urgenza artificiosamente

Un grafico a barre intitolato “Il tempo di risoluzione crolla dopo il lancio” mostra gli stessi valori di 18, 17, 14 e 12 ore su un asse che inizia a 11,5. Le barre sembrano ridursi quasi a nulla. Gennaio è etichettato come “prima”, Aprile come “dopo”, i mesi intermedi sono nascosti dietro l’hover e non vengono mostrati né la data dell’intervento né una fonte. La scala cromatica rosso-verde fornisce l’unico significato prestazionale.

Questo fallisce perché le barre richiedono una baseline zero, il titolo afferma una causalità e le etichette selettive impediscono la verifica. I valori solo in hover escludono i contesti di tastiera, tocco, estrazione e tecnologia assistiva. Risolvilo con una baseline zero o una scala lineare chiaramente indicata, ogni osservazione, fonte, periodo, tabella dati e un punto chiave non causale.

Markup Schema e accessibilità

Schema.org non ha un tipo generico Chart o Graph. Un grafico rimane un elemento probatorio all’interno di un’entità idonea a livello di pagina come Article, Report o Dataset. La ricerca può descrivere un dataset reale scaricabile con proprietà come copertura temporale, variabili, creatore e distribuzione. Non inventare mai una proprietà di dataset, valutazione, trend o risultato solo perché esiste un grafico.

L’accessibilità richiede più del semplice testo alternativo. Assegna alla figura un titolo e una didascalia e a un SVG un nome e una descrizione accessibili. Canvas necessita di una rappresentazione DOM equivalente. Fornisci i valori tracciati in una tabella con intestazioni reali e mantieni il punto chiave al di fuori della grafica in modo che sopravviva a stampa, estrazione e fallimento dell’immagine.

Non usare il colore come unico identificatore di serie; aggiungi etichette dirette, pattern di linee, forme di punti o testo. I suggerimenti devono essere raggiungibili da tastiera, eliminabili e supplementari. Con zoom al 200% e larghezze ridotte, ridisponi o scrolla una regione del grafico etichettata senza creare scrolling a livello di pagina.

Rispetta le preferenze di movimento ridotto ed evita disegni animati o transizioni automatiche. Se i filtri modificano i dati, annuncia lo stato e mostra i filtri attivi nel testo. Un grafico statico non è un bersaglio da tastiera a meno che non abbia controlli reali.

Regole di scrittura

Queste regole mantengono l’autorità visiva del grafico proporzionale alle sue prove:

• Scrivi un punto chiave di 15–35 parole. Nomina la direzione o relazione, i punti finali rilevanti, la popolazione e il periodo quando prevengono ambiguità.
• Usa 2–20 punti per serie e non più di quattro serie. Suddividi lavori più densi in piccoli multipli, una tabella o un dataset scaricabile.
• Mantieni i titoli tra 5–16 parole e le etichette tra 1–6 parole. I titoli descrivono; i punti chiave concludono.
• Usa la stessa unità e definizione di misurazione per tutta una serie. Se un metodo cambia, interrompi la linea e spiega la discontinuità.
• Fai partire gli assi quantitativi dei grafici a barre e a barre impilate da zero. Una scala di linee o dispersione può essere più ristretta solo quando limiti e unità rimangono visibili e la scelta non esagera il rumore.
• Usa spaziatura visiva uguale per intervalli numerici o temporali uguali. Non distanziare Febbraio e Dicembre come se fossero mesi adiacenti quando mancano periodi intermedi.
• Mostra i valori mancanti come mancanti. Non convertirli mai a zero, collegarli silenziosamente o interpolarli senza un metodo dichiarato.
• Etichetta direttamente proiezioni, stime, valori modellati e valori destagionalizzati. Non presentarli come dati osservati.
• Evita doppi assi, effetti 3D, prospettiva, ridimensionamento pittorico dell’area, assi spezzati, palette arcobaleno e curve smussate che implicano valori non misurati.
• Indica la fonte, il periodo di copertura, il campione o la coorte quando pertinente e qualsiasi trasformazione come indicizzazione, normalizzazione o media mobile.
• Non inserire mai un invito all’azione, testimonianza, badge promozionale, affermazione causale non supportata o avvertenza essenziale solo all’interno dell’immagine.
• Deriva il grafico e la sua tabella da un unico dataset canonico. Se i valori cambiano, aggiorna una volta e rigenera entrambi gli output.

Metodologia dettagliata e citazioni possono continuare in un blocco delle fonti nelle vicinanze, ma il grafico necessita comunque di una fonte visibile e di un periodo propri.

Tipi di post che lo utilizzano

Il campo frontmatter postTypes definisce le relazioni approvate di seguito. L’inclusione permette un grafico quando esiste un pattern quantitativo reale; non richiede agli autori di inventare un grafico per ogni pagina.

Checklist QA

• Il compito principale del lettore è vedere un pattern; la sola consultazione esatta sarebbe meglio servita da una tabella.
• Il punto chiave è una frase completa in testo HTML, concorda con i dati tracciati e rimane entro i limiti delle prove.
• Il titolo nomina la misura, la popolazione e il periodo necessari per comprendere la figura.
• Il tipo di grafico corrisponde al compito analitico: sequenza, confronto di categorie, distribuzione o relazione.
• Le baseline delle barre iniziano a zero; ogni altra scala è visibile, giustificata e non ingannevole.
• Intervalli, unità, denominatori, calcoli e valori mancanti sono rappresentati onestamente.
• Le serie sono etichettate direttamente o distinguibili senza il solo colore.
• Ogni valore essenziale è disponibile senza hover, JavaScript, animazione o interpretazione dell’immagine.
• Una tabella dati o un’alternativa testuale completa utilizza intestazioni reali e corrisponde esattamente al contenuto visivo.
• La fonte, il periodo di copertura, la coorte o il campione e le trasformazioni sono visibili accanto al grafico.
• Il grafico e l’alternativa accessibile derivano da un unico dataset canonico.
• Il blocco non si trova accanto a un display di dati duplicato, un modulo di conversione o un elemento visivo concorrente ad alta enfasi.
• Il grafico funziona con input da tastiera, impostazioni ad alto contrasto, zoom al 200%, schermi stretti e movimento ridotto.
• Non rimangono effetti 3D, doppio asse, asse spezzato, ridimensionamento pittorico, affermazione causale non supportata o serie decorativa.
• Eventuali dati strutturati a livello di pagina sono idonei e coerenti con le prove visibili.
• Il tipo di post selezionato include il blocco grafico nel suo contratto di contenuti.

FAQ

Quando dovrei usare un grafico invece di una tabella?

Usa un grafico quando il primo compito è vedere un trend, una distribuzione, una classifica o una relazione. Usa una tabella quando i lettori hanno bisogno di una consultazione precisa attraverso molti campi. Quando entrambi i compiti contano, mantieni una tabella compatta all’interno del blocco grafico come alternativa dati accessibile.

Un grafico a barre deve partire da zero?

Sì. La lunghezza delle barre rappresenta la grandezza da una linea di base, quindi tagliare quella linea di base modifica il rapporto apparente. Un grafico a linee può utilizzare una scala non-zero quando l’intervallo visibile e le unità sono espliciti e la visuale più ristretta è analiticamente necessaria.

Il testo alternativo è sufficiente per rendere un grafico accessibile?

Di solito no. Il testo alternativo dovrebbe identificare il display e riassumere il suo pattern principale. Un grafico con più valori necessita anche di una tabella dati nelle vicinanze o di un testo equivalente contenente le etichette, i valori, le unità, la fonte e il periodo.

Il punto chiave può apparire solo nel titolo del grafico?

No. Un titolo identifica cosa mostra la figura; un punto chiave enuncia cosa il lettore dovrebbe notare. Mantieni il punto chiave come frase completa al di fuori della grafica in modo che rimanga disponibile quando l’immagine non viene percepita o estratta.

Un blocco grafico genera markup Schema.org?

No. Usa markup valido a livello di pagina come Article, Report o Dataset solo quando la pagina si qualifica indipendentemente. Il grafico non crea un nuovo diritto allo schema né giustifica affermazioni strutturate assenti dalle prove visibili.