Blocuri grafice: Grafice accesibile cu axe corecte

Un bloc grafic este un afișaj de date mărginit care combină un grafic cu concluzia, titlul, etichetele, sursa, perioada și alternativa de date accesibilă. Folosiți-l atunci când forma datelor răspunde la întrebare mai rapid decât un șir de valori exacte.

De ce contează acest element

Graficele exploatează recunoașterea vizuală a modelelor. Un cititor poate detecta o creștere, un decalaj, o grupare sau o schimbare de pantă înainte de a compara aceleași valori celulă cu celulă. Acest lucru este util atunci când modelul — nu căutarea precisă — este scopul. Este și periculos: axe decupate, intervale inegale sau efecte de arie pot face o diferență mică să pară decisivă. Un grafic își merită locul doar atunci când reduce efortul fără a modifica dovezile.

Psihologia cititorului face ca concluzia scrisă să fie esențială. Oamenii își pot aminti mai ușor o direcție sau o dimensiune relativă decât o notă de subsol. Enunțați concluzia mărginită în text, incluzând populația și perioada atunci când este necesar. Nu pretindeți niciodată cauzalitate dintr-o corelație sau o tendință generală dintr-un interval selectat.

Extractibilitatea automată necesită nume de serii, etichete, valori, unități, sursă, perioadă și concluzie sub formă de text. Un crawler sau un motor de răspunsuri AI poate să nu interpreteze o cale SVG, un canvas, o captură de ecran, o stare de hover sau o legendă cromatică. Blocul asociază, așadar, elementul vizual cu date ordonate pentru tehnologia de asistență, indexare, verificare și reutilizare.

Regulile de redactare a elementelor au prioritate: selectați acest element deoarece scopul unui pasaj este de a releva un model cantitativ, nu pentru că un grafic ar decora pagina. Dacă sarcina este căutarea exactă sau compararea element cu element, folosiți un tabel chiar și atunci când software-ul de creare de grafice este disponibil.

Când să îl folosiți

Folosiți un grafic atunci când cititorul trebuie să vadă una dintre cele patru forme: schimbare într-o succesiune ordonată, diferențe între un set gestionabil de categorii, distribuția observațiilor sau relația dintre două variabile cantitative. O diagramă liniară poate releva direcția în timp; o diagramă cu bare poate clasifica categorii; o histogramă poate releva distribuția; iar un grafic de dispersie poate releva asocierea și valorile aberante. Setul de date trebuie să fie suficient de complet, măsurat consistent și relevant pentru afirmație.

Un test simplu separă graficul de tabel: dacă cititorul ar trebui să observe mai întâi un model, alegeți un grafic; dacă ar trebui să găsească o valoare exactă, alegeți un tabel. Dacă ambele contează, includeți un tabel compact în cadrul blocului grafic, astfel încât cele două ieșiri să nu poată deriva.

Greșelile frecvente includ:

• Două valori: scrieți o propoziție sau o comparație mică. Două bare rareori relevă un model mai direct.
• O listă lungă de categorii: folosiți un tabel grupat. Treizeci de bare creează probleme de etichetare și layout pe mobil.
• Câteva metrici principale: folosiți o bandă statistică atunci când cifrele sunt puncte de interes independente, nu o singură serie.
• Un proces sau o cronologie: folosiți o cronologie atunci când marcajele nu codifică o cantitate.
• O afirmație cauzală dintr-o asociere: un grafic de dispersie poate arăta că două variabile se mișcă împreună; nu poate stabili că una a cauzat-o pe cealaltă.
• O „poveste a datelor" decorativă: dacă eliminarea graficului nu pierde nicio concluzie, eliminați-l.
• O comparație cu criterii calitative lungi: folosiți un tabel comparativ deoarece categorii precum politica de asistență sau fezabilitatea implementării nu pot fi codificate onest ca lungime de bară.

Unde să îl plasați

Plasați graficul după paragraful care introduce întrebarea, populația, măsura și perioada. Puneți concluzia direct înainte sau după acesta, apoi explicați implicațiile și limitările. În cercetare, fiecare grafic aparține lângă constatarea sa. Într-un studiu de caz, stabiliți linia de bază și intervenția înainte de a arăta schimbarea.

Păstrați titlul, elementul vizual, legenda, concluzia, alternativa de date, sursa și notele într-un singur perimetru de figură. Notele de subsol pot urma figura, dar o reclamă, un formular de înscriere sau o imagine fără legătură nu o pot întrerupe. Sursa trebuie să fie vizibilă fără a deschide alternativa de date.

Nu îl plasați lângă un alt grafic la fel de proeminent, un tabel independent sau o bandă statistică care repetă aceleași date, un tabel de prețuri, un carusel sau un îndemn la acțiune cu accent ridicat. Aceste asocieri creează concurență sau surse multiple de adevăr. Separați afișajele de date prin explicații.

Anatomie

Captura de ecran etichetată trebuie să identifice aceste regiuni:

1. Concluzie: o propoziție care enunță modelul fără imagine.
2. Titlul figurii: o descriere neutră a măsurii, populației și perioadei.
3. Graficul: regiunea în care poziția, lungimea sau direcția codifică valorile.
4. Axe și scale: etichete vizibile, unități, marcaje, intervale și linie de bază.
5. Etichete de serii: etichete directe acolo unde este posibil; în caz contrar, o legendă care nu se bazează doar pe culoare.
6. Adnotare: un marcaj opțional legat de un punct de date, niciodată un substitut pentru metodologie.
7. Alternativă de date: un tabel sau un text ordonat care conține valorile reprezentate grafic.
8. Legendă și sursă: domeniul, proveniența, perioada de raportare și orice notă de calcul.

Exemple de design

Fiecare variantă folosește marcaje bidimensionale, unități vizibile, o concluzie, date sursă și o alternativă accesibilă. Nu există variante 3D, pictogramă, indicator semicircular sau axă duală, deoarece decorațiunile și scalele concurente distorsionează comparația.

Diagramă liniară: folosiți pentru valori măsurate la intervale ordonate consistente, de obicei temporale. Observațiile lipsă trebuie să apară ca goluri, nu ca conexiuni inventate. Mai mult de patru serii necesită, de obicei, împărțirea graficului sau alegerea unui tabel.

Diagramă cu bare: folosiți pentru comparație sau clasare între categorii discrete. Începeți axa cantitativă de la zero, deoarece lungimea barei reprezintă magnitudinea. Preferați barele orizontale atunci când etichetele sunt lungi și sortați după valoare, cu excepția cazului în care o ordine naturală are sens.

Grafic de dispersie: folosiți pentru relația dintre două variabile cantitative. Afișați observațiile individuale, denumiți ambele măsuri, dezvăluiți orice linie de tendință ajustată și evitați limbajul cauzal, cu excepția cazului în care designul de cercetare îl susține.

Diagramă cu bare stivuite: folosiți atunci când atât totalul, cât și compoziția contează pentru un număr mic de grupuri. Mențineți ordinea segmentelor stabilă și limitați stiva la patru categorii. Dacă cititorii au nevoie în principal să compare fiecare componentă, folosiți bare grupate sau multipli mici.

Parametri

„Sursa" de mai jos înseamnă locația din care motorul de randare obține câmpul, nu furnizorul de dovezi citat de grafic.

show-data=false este permis doar atunci când un tabel de date echivalent sau o alternativă textuală completă, valoare cu valoare, este deja asociată programatic cu figura. Nu este niciodată o licență de a publica un grafic exclusiv vizual.

Sintaxă și exemple de cod

Toate cele trei notații păstrează același titlu, concluzie, set de date, scală, sursă, perioadă și text alternativ. Exemplele sunt ilustrative.

Directivă Markdown portabilă

:::chart-block{type=bar y-label="Solicitări" y-min=0 source="Set de date editorial ilustrativ" period="2026 T1–T4" alt="Solicitările scad în fiecare trimestru, de la 120 în T1 la 72 în T4."}
## Solicitări de asistență ilustrative pe trimestru

Concluzie: Solicitările scad în fiecare trimestru, de la 120 în T1 la 72 în T4.

| Trimestru | Solicitări |
|---|---:|
| T1 | 120 |
| T2 | 108 |
| T3 | 84 |
| T4 | 72 |
:::

Primul titlu se mapează la title; concluzia și tabelul de date canonic se mapează la câmpurile din corp.

Shortcode Hugo

Adaptorul Hugo folosește parametri denumiți și derivă elementul vizual și tabelul dintr-un singur set de date din corp. Această notație specifică maparea intenționată.

{{< chart-block type="bar" yLabel="Solicitări" yMin="0" source="Set de date editorial ilustrativ" period="2026 T1–T4" alt="Solicitările scad în fiecare trimestru, de la 120 în T1 la 72 în T4." >}}
## Solicitări de asistență ilustrative pe trimestru

Concluzie: Solicitările scad în fiecare trimestru, de la 120 în T1 la 72 în T4.

| Trimestru | Solicitări |
|---|---:|
| T1 | 120 |
| T2 | 108 |
| T3 | 84 |
| T4 | 72 |
{{< /chart-block >}}

Bloc WordPress

<!-- wp:amicited/chart-block {"type":"bar","title":"Solicitări de asistență ilustrative pe trimestru","yLabel":"Solicitări","yMin":0,"source":"Set de date editorial ilustrativ","period":"2026 T1–T4","alt":"Solicitările scad în fiecare trimestru, de la 120 în T1 la 72 în T4.","takeaway":"Solicitările scad în fiecare trimestru, de la 120 în T1 la 72 în T4."} -->
<table><thead><tr><th>Trimestru</th><th>Solicitări</th></tr></thead><tbody><tr><th>T1</th><td>120</td></tr><tr><th>T2</th><td>108</td></tr><tr><th>T3</th><td>84</td></tr><tr><th>T4</th><td>72</td></tr></tbody></table>
<!-- /wp:amicited/chart-block -->

Blocul poate randa SVG sau canvas, dar ieșirea salvată și randată pe server trebuie să rețină concluzia și tabelul. JavaScript poate îmbunătăți interacțiunea, dar nu poate furniza singurele etichete sau valori.

Exemple

Corect: elementul vizual și cuvintele spun aceeași poveste mărginită

Concluzie: În setul de date ilustrativ, timpul mediu de rezolvare scade de la 18 ore în ianuarie la 12 ore în aprilie; graficul nu stabilește de ce.

Diagrama liniară folosește intervale lunare uniforme și o axă etichetată „Ore" de la 10 la 20. Această scară liniară dezvăluită, diferită de zero, este adecvată deoarece poziția, nu lungimea barei, codifică valorile. Tabelul expune fiecare punct, iar textul nu atribuie scăderea unei intervenții.

Greșit: graficul fabrică urgența

O diagramă cu bare intitulată „Timpul de rezolvare se prăbușește după lansare" arată aceleași valori de 18, 17, 14 și 12 ore pe o axă care începe la 11,5. Barele par să se micșoreze aproape de zero. Ianuarie este etichetat „înainte", aprilie „după", lunile intermediare sunt ascunse în spatele unui hover, iar nici data intervenției, nici o sursă nu sunt afișate. O culoare roșu-verde oferă singurul sens al performanței.

Acest lucru eșuează deoarece barele necesită o linie de bază zero, titlul afirmă cauzalitate, iar etichetele selective împiedică verificarea. Valorile accesibile doar prin hover exclud tastatura, atingerea, extracția și contextele de tehnologie de asistență. Reparați-l cu o linie de bază zero sau o scară liniară clară, fiecare observație, sursă, perioadă, tabel de date și o concluzie non-cauzală.

Markup Schema și accesibilitate

Schema.org nu are un tip general Chart sau Graph. Un grafic rămâne o dovadă în cadrul unei entități eligibile la nivel de pagină, precum Article, Report sau Dataset. Cercetarea poate descrie un set de date real descărcabil cu proprietăți precum acoperire temporală, variabile, creator și distribuție. Nu inventați niciodată o proprietate de set de date, evaluare, tendință sau rezultat doar pentru că există un grafic.

Accesibilitatea necesită mai mult decât text alternativ. Oferiți figurii un titlu și o legendă, iar SVG-ului un nume și o descriere accesibile. Canvas-ul are nevoie de o reprezentare DOM echivalentă. Furnizați valorile reprezentate într-un tabel cu antete reale și păstrați concluzia în afara elementului grafic, astfel încât să supraviețuiască tipăririi, extracției și eșecului imaginii.

Nu folosiți culoarea ca singur identificator de serie; adăugați etichete directe, modele de linii, forme de puncte sau text. Tooltip-urile trebuie să fie accesibile de la tastatură, să poată fi închise și să fie suplimentare. La zoom de 200% și lățimi înguste, refluați sau derulați o regiune etichetată a graficului fără a crea defilare la nivel de pagină.

Respectați preferințele de mișcare redusă și evitați desenarea animată sau tranzițiile automate. Dacă filtrele modifică datele, anunțați starea și afișați filtrele active în text. Un grafic static nu este o țintă de tastatură decât dacă are comenzi reale.

Reguli de redactare

Aceste reguli mențin autoritatea vizuală a graficului proporțională cu dovezile sale:

• Scrieți o singură concluzie de 15–35 de cuvinte. Denumiți direcția sau relația, punctele finale relevante, populația și perioada atunci când acestea previn ambiguitatea.
• Folosiți 2–20 de puncte per serie și cel mult patru serii. Împărțiți lucrările mai dense în multipli mici, un tabel sau un set de date descărcabil.
• Mențineți titlurile la 5–16 cuvinte și etichetele la 1–6 cuvinte. Titlurile descriu; concluziile trag concluzii.
• Folosiți aceeași unitate și aceeași definiție de măsurare pe parcursul unei serii. Dacă o metodă se schimbă, întrerupeți linia și explicați discontinuitatea.
• Începeți axele cantitative ale diagramelor cu bare și barelor stivuite de la zero. O scară liniară sau de dispersie poate fi mai îngustă doar atunci când limitele și unitățile rămân vizibile și alegerea nu exagerează zgomotul.
• Folosiți spațiere vizuală egală pentru intervale numerice sau temporale egale. Nu spațiați februarie și decembrie ca și cum ar fi luni adiacente atunci când perioadele intermediare lipsesc.
• Afișați valorile lipsă ca lipsă. Nu le convertiți niciodată la zero, nu le conectați în tăcere și nu le interpolați fără o metodă declarată.
• Etichetați proiecțiile, estimările, valorile modelate și valorile ajustate sezonier direct. Nu le stilizați ca date observate.
• Evitați axele duale, efectele 3D, perspectiva, scalarea pictografică a ariei, axele întrerupte, paletele curcubeu și curbele netezite care implică valori nemăsurate.
• Enunțați sursa, perioada de acoperire, eșantionul sau cohorta acolo unde este relevant și orice transformare, cum ar fi indexarea, normalizarea sau media mobilă.
• Nu puneți niciodată un îndemn la acțiune, o mărturie, o insignă promoțională, o afirmație cauzală nesuținută sau o avertizare esențială doar în interiorul imaginii.
• Derivați graficul și tabelul său dintr-un singur set de date canonic. Dacă valorile se modifică, actualizați o singură dată și regenerați ambele ieșiri.

Metodologia detaliată și citările pot continua într-un bloc surse apropiat, dar graficul are totuși nevoie de o sursă și o perioadă vizibile proprii.

Tipuri de postări care îl folosesc

Câmpul frontmatter postTypes definește relațiile aprobate de mai jos. Includerea permite un grafic atunci când există un model cantitativ real; nu obligă autorii să creeze un grafic pentru fiecare pagină.

Listă de verificare QA

• Sarcina principală a cititorului este de a vedea un model; doar căutarea exactă ar fi mai bine servită de un tabel.
• Concluzia este o propoziție completă în text HTML, este de acord cu datele reprezentate și rămâne în limitele dovezilor.
• Titlul denumește măsura, populația și perioada necesare pentru a înțelege figura.
• Tipul de grafic se potrivește cu sarcina analitică: succesiune, comparație de categorii, distribuție sau relație.
• Liniile de bază ale barelor încep de la zero; orice altă scară este vizibilă, justificată și non-înșelătoare.
• Intervalele, unitățile, numitorii, calculele și valorile lipsă sunt reprezentate onest.
• Seriile sunt etichetate direct sau pot fi distinse fără a folosi doar culoarea.
• Fiecare valoare esențială este disponibilă fără hover, JavaScript, animație sau interpretare a imaginii.
• Un tabel de date sau o alternativă textuală completă folosește antete reale și se potrivește exact cu elementul vizual.
• Sursa, perioada de acoperire, cohorta sau eșantionul și transformările sunt vizibile lângă grafic.
• Graficul și alternativa accesibilă derivă dintr-un singur set de date canonic.
• Blocul nu se află lângă un afișaj de date duplicat, un modul de conversie sau un element vizual concurent cu accent ridicat.
• Graficul funcționează cu intrare de la tastatură, setări de contrast ridicat, zoom de 200%, ecrane înguste și mișcare redusă.
• Nu rămâne niciun efect 3D, axă duală, axă întreruptă, scalare pictografică, afirmație cauzală nesuținută sau serie decorativă.
• Orice date structurate la nivel de pagină este eligibil și consistent cu dovezile vizibile.
• Tipul de postare selectat include blocul grafic în contractul său de conținut.

Întrebări frecvente

Când ar trebui să folosesc un grafic în locul unui tabel?

Folosiți un grafic atunci când prima sarcină este de a vedea o tendință, distribuție, clasament sau relație. Folosiți un tabel atunci când cititorii au nevoie de căutare precisă în mai multe câmpuri. Când ambele sarcini contează, păstrați un tabel compact în interiorul blocului grafic ca alternativă accesibilă de date.

Trebuie ca o diagramă cu bare să înceapă de la zero?

Da. Lungimea barei reprezintă magnitudinea dintr-o linie de bază, deci decuparea acelei linii de bază modifică raportul aparent. O diagramă liniară poate folosi o scară diferită de zero atunci când domeniul vizibil și unitățile sunt explicite și vederea mai îngustă este analitic necesară.

Este textul alternativ suficient pentru a face un grafic accesibil?

De obicei, nu. Textul alternativ ar trebui să identifice afișajul și să rezume modelul principal. Un grafic cu mai multe valori are nevoie și de un tabel de date apropiat sau de un text echivalent care să conțină etichetele, valorile, unitățile, sursa și perioada.

Poate concluzia să apară doar în titlul graficului?

Nu. Un titlu identifică ceea ce arată figura; o concluzie enunță ceea ce cititorul ar trebui să observe. Păstrați concluzia ca o propoziție completă în afara elementului grafic, astfel încât să rămână disponibilă atunci când imaginea nu este percepută sau extrasă.

Creează un bloc grafic markup Schema.org?

Nu. Folosiți markup valid la nivel de pagină, precum Article, Report sau Dataset, doar atunci când pagina se califică independent. Graficul nu creează un nou drept schema și nici nu justifică afirmații structurate care lipsesc din dovezile vizibile.