Chartblokken: Toegankelijke grafieken met eerlijke assen

Een chartblok is een begrensde gegevensweergave die een grafiek combineert met de conclusie, titel, labels, bron, periode en een toegankelijk gegevensalternatief. Gebruik het wanneer de vorm van de gegevens de vraag sneller beantwoordt dan een rij exacte waarden.

Waarom dit element ertoe doet

Grafieken maken gebruik van visuele patroonherkenning. Een lezer kan een stijging, verschil, cluster of verandering in helling detecteren voordat hij dezelfde waarden cel voor cel vergelijkt. Dat helpt wanneer het patroon—niet het precies opzoeken—het punt is. Het is ook gevaarlijk: bijgesneden assen, ongelijke intervallen of oppervlakte-effecten kunnen een klein verschil doorslaggevend laten lijken. Een grafiek verdient zijn plaats alleen wanneer hij de inspanning vermindert zonder het bewijs te veranderen.

Lezerspsychologie maakt de geschreven conclusie essentieel. Mensen onthouden een richting of relatieve grootte gemakkelijker dan een voetnoot. Vermeld de afgebakende conclusie in tekst, inclusief de populatie en periode indien nodig. Claim nooit causaliteit uit correlatie of een algemene trend uit een geselecteerd interval.

Machine-extracteerbaarheid vereist serienamen, labels, waarden, eenheden, bron, periode en conclusie als tekst. Een crawler of AI-antwoordengine interpreteert mogelijk geen SVG-pad, canvas, screenshot, hover-status of kleurlegenda. Het blok koppelt daarom het visuele aan geordende gegevens voor ondersteunende technologie, indexering, verificatie en hergebruik.

De schrijfregels voor elementen hebben voorrang: selecteer dit element omdat het doel van een passage is om een kwantitatief patroon te onthullen, niet omdat een grafiek de pagina zou versieren. Als de taak exact opzoeken of item-voor-item vergelijken is, gebruik dan een tabel, zelfs als grafieksoftware beschikbaar is.

Wanneer te gebruiken

Gebruik een grafiek wanneer de lezer een van vier vormen moet zien: verandering over een geordende reeks, verschillen tussen een beheersbare set categorieën, de verdeling van waarnemingen, of de relatie tussen twee kwantitatieve variabelen. Een lijndiagram kan richting over tijd onthullen; een staafdiagram kan categorieën rangschikken; een histogram kan verdeling onthullen; en een spreidingsdiagram kan associatie en uitschieters onthullen. De dataset moet volledig genoeg zijn, consistent gemeten en relevant voor de bewering.

Een eenvoudige test scheidt grafiek van tabel: als de lezer eerst een patroon moet opmerken, kies dan een grafiek; als hij een exacte waarde moet vinden, kies dan een tabel. Als beide belangrijk zijn, neem dan een compacte tabel op in het chartblok zodat de twee uitvoeren niet kunnen afwijken.

Veelvoorkomende bijna-missers zijn:

• Twee waarden: schrijf een zin of kleine vergelijking. Twee staven onthullen zelden een patroon directer.
• Een lange categorieënlijst: gebruik een gegroepeerde tabel. Dertig staven creëren label- en mobiele lay-outproblemen.
• Een paar hoofdmetrieken: gebruik een stat-balk wanneer de cijfers onafhankelijke hoogtepunten zijn in plaats van één reeks.
• Een proces of chronologie: gebruik een tijdlijn wanneer markeringen geen hoeveelheid coderen.
• Een causale bewering uit een associatie: een spreidingsdiagram kan laten zien dat twee variabelen samen bewegen; het kan niet vaststellen dat de een de ander heeft veroorzaakt.
• Een decoratief “dataverhaal”: als het verwijderen van de grafiek geen conclusie verliest, verwijder hem dan.
• Een vergelijking met lange kwalitatieve criteria: gebruik een vergelijkingstabel omdat categorieën zoals ondersteuningsbeleid of implementatiefit niet eerlijk als staflengte kunnen worden gecodeerd.

Waar te plaatsen

Plaats de grafiek na de alinea die de vraag, populatie, maatstaf en periode introduceert. Zet de conclusie direct ervoor of erna, leg vervolgens implicaties en beperkingen uit. Bij onderzoek hoort elke grafiek naast de bevinding. Bij een casestudy stelt u de basislijn en interventie vast voordat u verandering laat zien.

Houd de titel, visualisatie, legenda, conclusie, gegevensalternatief, bron en notities binnen één figuurgrens. Voetnoten mogen de figuur volgen, maar een advertentie, aanmeldformulier of niet-gerelateerde afbeelding mag deze niet onderbreken. De bron moet zichtbaar zijn zonder het gegevensalternatief te openen.

Plaats het niet naast een even prominente grafiek, een onafhankelijke tabel of stat-balk die de gegevens herhaalt, een prijstabel, carrousel of nadrukkelijke call to action. Deze combinaties concurreren of creëren meerdere waarheidsbronnen. Scheid gegevensweergaven met uitleg.

Anatomie

De gelabelde screenshot moet deze gebieden identificeren:

1. Conclusie: één zin die het patroon beschrijft zonder de afbeelding.
2. Figuurtitel: een neutrale beschrijving van maatstaf, populatie en periode.
3. Plot: het gebied waar positie, lengte of richting waarden codeert.
4. Assen en schalen: zichtbare labels, eenheden, streepjes, intervallen en basislijn.
5. Serielabels: directe labels waar mogelijk; anders een legenda die niet alleen op kleur is gebaseerd.
6. Annotatie: een optionele notitie gekoppeld aan een gegevenspunt, nooit een vervanging voor methodologie.
7. Gegevensalternatief: een tabel of geordende tekst met de geplotte waarden.
8. Bijschrift en bron: reikwijdte, herkomst, rapportageperiode en eventuele berekeningsnotitie.

Ontwerpvoorbeelden

Elke variant gebruikt tweedimensionale markeringen, zichtbare eenheden, een conclusie, brongegevens en een toegankelijk alternatief. Er is geen 3D-, pictogram-, meter- of dubbele-asvariant omdat decoratie en concurrerende schalen vergelijking verstoren.

Lijndiagram: gebruik voor waarden gemeten op consistente geordende intervallen, meestal tijd. Ontbrekende waarnemingen moeten als hiaten verschijnen in plaats van verzonnen verbindingen. Meer dan vier series vereist normaal gesproken het splitsen van de grafiek of het kiezen van een tabel.

Staafdiagram: gebruik voor vergelijking of rangschikking over discrete categorieën. Start de kwantitatieve as bij nul omdat staflengte grootte vertegenwoordigt. Geef de voorkeur aan horizontale staven wanneer labels lang zijn, en sorteer op waarde tenzij een natuurlijke volgorde betekenisvol is.

Spreidingsdiagram: gebruik voor de relatie tussen twee kwantitatieve variabelen. Toon individuele waarnemingen, noem beide maatstaven, vermeld elke gefitte trendlijn en vermijd causaal taalgebruik tenzij het onderzoeksontwerp dit ondersteunt.

Gestapeld staafdiagram: gebruik wanneer zowel totaal als samenstelling belangrijk zijn over een klein aantal groepen. Houd de segmentvolgorde stabiel en beperk de stapel tot vier categorieën. Als lezers vooral elke component moeten vergelijken, gebruik dan gegroepeerde staven of kleine meervoudige grafieken.

Parameters

“Bron” verwijst hieronder naar de geschreven locatie waarvan de renderer het veld verkrijgt, niet naar de bewijsleverancier waarnaar de grafiek verwijst.

show-data=false is alleen toegestaan wanneer een gelijkwaardige datatabel of volledige waarde-voor-waarde tekstalternatief al programmatisch aan de figuur is gekoppeld. Het is nooit een licentie om een alleen-visuele grafiek te publiceren.

Syntax en codevoorbeelden

Alle drie notaties behouden dezelfde titel, conclusie, dataset, schaal, bron, periode en alternatieve tekst. De figuren zijn illustratief.

Draagbare Markdown-richtlijn

:::chart-block{type=bar y-label="Verzoeken" y-min=0 source="Illustratieve redactionele dataset" period="2026 Q1–Q4" alt="Verzoeken dalen elk kwartaal, van 120 in Q1 naar 72 in Q4."}
## Illustratieve ondersteuningsverzoeken per kwartaal

Conclusie: Verzoeken dalen elk kwartaal, van 120 in Q1 naar 72 in Q4.

| Kwartaal | Verzoeken |
|---:|---:|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
:::

De eerste kop wordt toegewezen aan title; de conclusie en canonieke datatabel worden toegewezen aan body-velden.

Hugo shortcode

De Hugo-adapter gebruikt benoemde parameters en leidt de visualisatie en tabel af uit één body-dataset. Deze notatie specificeert de beoogde toewijzing.

{{< chart-block type="bar" yLabel="Verzoeken" yMin="0" source="Illustratieve redactionele dataset" period="2026 Q1–Q4" alt="Verzoeken dalen elk kwartaal, van 120 in Q1 naar 72 in Q4." >}}
## Illustratieve ondersteuningsverzoeken per kwartaal

Conclusie: Verzoeken dalen elk kwartaal, van 120 in Q1 naar 72 in Q4.

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

WordPress-blok

<!-- wp:amicited/chart-block {"type":"bar","title":"Illustratieve ondersteuningsverzoeken per kwartaal","yLabel":"Verzoeken","yMin":0,"source":"Illustratieve redactionele dataset","period":"2026 Q1–Q4","alt":"Verzoeken dalen elk kwartaal, van 120 in Q1 naar 72 in Q4.","takeaway":"Verzoeken dalen elk kwartaal, van 120 in Q1 naar 72 in Q4."} -->
<table><thead><tr><th>Kwartaal</th><th>Verzoeken</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 -->

Het blok kan SVG of canvas renderen, maar opgeslagen en server-gerenderde uitvoer moet de conclusie en tabel behouden. JavaScript mag interactie verbeteren, nooit de enige labels of waarden leveren.

Voorbeelden

Goed: de visualisatie en tekst vertellen hetzelfde begrensde verhaal

Conclusie: In de illustratieve dataset daalt de mediane oplossingstijd van 18 uur in januari naar 12 uur in april; de grafiek stelt niet vast waarom.

Het lijndiagram gebruikt gelijkmatige maandelijkse intervallen en een gelabelde “Uren”-as van 10 tot 20. Dat vermelde niet-nul lijntype is passend omdat positie, niet staflengte, waarden codeert. De tabel toont elk punt, en de tekst schrijft de daling niet toe aan een interventie.

Slecht: de grafiek creëert urgentie

Een staafdiagram met de titel “Oplossingstijd stort in na lancering” toont dezelfde waarden van 18, 17, 14 en 12 uur op een as die bij 11,5 begint. De staven lijken bijna tot niets te krimpen. Januari is gelabeld als “ervoor”, april als “erna”, tussenliggende maanden zijn verborgen achter hover, en noch de interventiedatum noch een bron wordt getoond. Rood-naar-groen kleur is de enige prestatie-indicator.

Dit faalt omdat staven een nulbasislijn vereisen, de titel causaliteit beweert en selectieve labels verificatie voorkomen. Alleen-hover waarden sluiten toetsenbord-, aanraak-, extractie- en ondersteunende technologiecontexten uit. Herstel het met een nulbasislijn of duidelijk geschaald lijndiagram, elke waarneming, bron, periode, datatabel en een niet-causale conclusie.

Schema-opmaak en toegankelijkheid

Schema.org heeft geen algemeen type Chart of Graph. Een grafiek blijft bewijs binnen een in aanmerking komend paginaniveau-entiteit zoals Article, Report of Dataset. Onderzoek kan een echte downloadbare dataset beschrijven met eigenschappen zoals temporele dekking, variabelen, maker en distributie. Verzin nooit een dataset, beoordeling, trend of resultaateigenschap omdat een grafiek bestaat.

Toegankelijkheid vereist meer dan alt-tekst. Geef de figuur een titel en bijschrift en een SVG een toegankelijke naam en beschrijving. Canvas heeft een gelijkwaardige DOM-representatie nodig. Lever geplotte waarden in een tabel met echte kopteksten en houd de conclusie buiten de afbeelding, zodat deze overleeft bij afdrukken, extractie en afbeeldingsfouten.

Gebruik geen kleur als enige serie-identificator; voeg directe labels, lijnpatronen, puntvormen of tekst toe. Tooltips moeten bereikbaar zijn met toetsenbord, sluitbaar en aanvullend. Bij 200% zoom en smalle breedtes moet een gelabeld grafiekgebied hervloeien of scrollen zonder paginaniveau-scrolling te creëren.

Respecteer voorkeuren voor verminderde beweging en vermijd geanimeerde tekening of automatische overgangen. Als filters gegevens wijzigen, meld dan de status en toon actieve filters in tekst. Een statische grafiek is geen toetsenborddoelwit tenzij deze echte bedieningselementen heeft.

Schrijfregels

Deze regels houden het visuele gezag van de grafiek in verhouding tot het bewijs:

• Schrijf één conclusie van 15–35 woorden. Noem de richting of relatie, relevante eindpunten, populatie en periode wanneer deze dubbelzinnigheid voorkomen.
• Gebruik 2–20 punten per serie en maximaal vier series. Splits dichter werk op in kleine meervoudige grafieken, een tabel of een downloadbare dataset.
• Houd titels op 5–16 woorden en labels op 1–6 woorden. Titels beschrijven; conclusies concluderen.
• Gebruik dezelfde eenheid en meetdefinitie door een hele serie. Als een methode verandert, breek dan de lijn en leg de discontinuïteit uit.
• Begin staaf- en gestapelde-staaf kwantitatieve assen bij nul. Een lijn- of spreidingsschaal mag smaller zijn alleen wanneer grenzen en eenheden zichtbaar blijven en de keuze ruis niet overdrijft.
• Gebruik gelijke visuele afstand voor gelijke numerieke of tijdsintervallen. Plaats februari en december niet alsof ze aangrenzende maanden zijn wanneer tussenliggende perioden ontbreken.
• Toon ontbrekende waarden als ontbrekend. Converteer ze nooit naar nul, verbind er niet stilzwijgend overheen en interpoleer niet zonder een vermelde methode.
• Label projecties, schattingen, gemodelleerde waarden en seizoengecorrigeerde waarden direct. Stileer ze niet als waargenomen gegevens.
• Vermijd dubbele assen, 3D-effecten, perspectief, picturale oppervlakteschaling, gebroken assen, regenboogpaletten en afgevlakte curven die ongemeten waarden impliceren.
• Vermeld de bron, dekkingsperiode, steekproef of cohort waar relevant, en eventuele transformaties zoals indexering, normalisatie of voortschrijdend gemiddelde.
• Plaats nooit een call to action, getuigenis, promotionele badge, niet-ondersteunde causale bewering of essentieel voorbehoud alleen in de afbeelding.
• Leid de grafiek en de tabel af uit één canonieke dataset. Als waarden veranderen, werk dan één keer bij en genereer beide uitvoeren opnieuw.

Gedetailleerde methodologie en citaten kunnen worden voortgezet in een nabijgelegen bronnenblok , maar de grafiek heeft nog steeds een zichtbare bron en periode van zichzelf.

Berichttypen die het gebruiken

Het postTypes frontmatter-veld definieert de goedgekeurde relaties hieronder. Opname staat een grafiek toe wanneer een echt kwantitatief patroon bestaat; het vereist niet dat auteurs een grafiek voor elke pagina fabriceren.

QA-checklist

• De primaire taak van de lezer is het zien van een patroon; alleen exact opzoeken zou beter gediend zijn met een tabel.
• De conclusie is een volledige zin in HTML-tekst, komt overeen met de geplotte gegevens en blijft binnen het bewijs.
• De titel noemt de maatstaf, populatie en periode die nodig zijn om de figuur te begrijpen.
• Het grafiektype past bij de analytische taak: reeks, categorievergelijking, verdeling of relatie.
• Staaf basislijnen beginnen bij nul; elke andere schaal is zichtbaar, gerechtvaardigd en niet-bedrieglijk.
• Intervallen, eenheden, noemers, berekeningen en ontbrekende waarden worden eerlijk weergegeven.
• Series zijn direct gelabeld of te onderscheiden zonder alleen kleur.
• Elke essentiële waarde is beschikbaar zonder hover, JavaScript, animatie of beeldinterpretatie.
• Een datatabel of volledig tekstalternatief gebruikt echte kopteksten en komt exact overeen met de visualisatie.
• De bron, dekkingsperiode, cohort of steekproef en transformaties zijn zichtbaar naast de grafiek.
• De grafiek en het toegankelijke alternatief zijn afgeleid van één canonieke dataset.
• Het blok staat niet naast een dubbele gegevensweergave, conversiemodule of concurrerende visuele nadruk.
• De grafiek werkt met toetsenbordinvoer, hoog-contrastinstellingen, 200% zoom, smalle schermen en verminderde beweging.
• Geen 3D-effect, dubbele as, gebroken as, picturale schaling, niet-ondersteunde causale bewering of decoratieve serie blijft over.
• Eventuele gestructureerde data op paginaniveau is in aanmerking komend en consistent met het zichtbare bewijs.
• Het geselecteerde berichttype bevat het chartblok in zijn inhoudscontract.

FAQ

Wanneer moet ik een grafiek gebruiken in plaats van een tabel?

Gebruik een grafiek wanneer de eerste taak het zien van een trend, verdeling, rangschikking of relatie is. Gebruik een tabel wanneer lezers precieze opzoeking over veel velden nodig hebben. Als beide taken belangrijk zijn, houd dan een compacte tabel in het chartblok als toegankelijk gegevensalternatief.

Moet een staafdiagram bij nul beginnen?

Ja. Staflengte vertegenwoordigt grootte vanaf een basislijn, dus het bijsnijden van die basislijn verandert de schijnbare verhouding. Een lijndiagram mag een niet-nul schaal gebruiken wanneer het zichtbare bereik en de eenheden expliciet zijn en het smallere beeld analytisch noodzakelijk is.

Is alt-tekst voldoende om een grafiek toegankelijk te maken?

Meestal niet. Alt-tekst moet de weergave identificeren en het hoofdpatroon samenvatten. Een grafiek met meerdere waarden heeft ook een nabije datatabel of gelijkwaardige tekst nodig met de labels, waarden, eenheden, bron en periode.

Kan de conclusie alleen in de grafiektitel staan?

Nee. Een titel identificeert wat de figuur laat zien; een conclusie geeft aan wat de lezer moet opmerken. Houd de conclusie als een volledige zin buiten de afbeelding, zodat deze beschikbaar blijft wanneer het beeld niet wordt waargenomen of geëxtraheerd.

Maakt een chartblok Schema.org-opmaak aan?

Nee. Gebruik geldige paginaniveau-opmaak zoals Article, Report of Dataset alleen wanneer de pagina onafhankelijk in aanmerking komt. De grafiek creëert geen nieuw schema-recht of rechtvaardigt gestructureerde beweringen die afwezig zijn in zichtbaar bewijs.