Toegankelijke datavisualisatietools in 2026:
een werkende stack
Vijf bibliotheken domineren het moderne datavisualisatiedebat, maar slechts enkele behandelen een schermlezer als een volwaardige gebruiker. Dit is de scorekaart van een werkende engineer, geschreven voor teams die grafieken naar productie brengen in 2026.
1. De vijf assen die bepalen of een grafiek toegankelijk is
De term “toegankelijke grafiek” verbergt een reeks stilzwijgend uiteenlopende vereisten. Een staafdiagram kan als SVG worden weergegeven met perfect kleurcontrast en toch onbereikbaar zijn voor een toetsenbordgebruiker. Het kan toetsenbordnavigeerbaar zijn en toch niets nuttigs aankondigen aan een schermlezer. Het kan waarden helder aankondigen en toch een slechtziende gebruiker al bij de eerste tooltip kwijtraken. Om bibliotheken eerlijk te vergelijken, beoordeelt men elk van hen op vijf onafhankelijke assen die direct overeenkomen met hoe een echte hulptechnologiegebruiker een visualisatie ervaart.
Deze vijf assen zijn geen persoonlijke voorkeurslijst. Het is de praktische vertaling van de WCAG 2.2-succescriteria (1.4.11 niet-tekstcontrast, 2.1.1 toetsenbord, 4.1.2 naam rol waarde), de ARIA Authoring Practices-richtlijnen voor grafieken, en de W3C Research Questions Task Force-ontwerpnoot “Data Visualization Accessibility” die sinds 2023 circuleert. Elke bibliotheek produceert SVG; elke bibliotheek geeft een legenda weer; elke bibliotheek heeft een mening over kleur. Wat ze onderscheidt zijn de standaardinstellingen — de grafiek die ontstaat wanneer men de kleinst mogelijke hoeveelheid code schrijft.
1. SVG met semantische ARIA. Produceert de bibliotheek SVG (geen canvas), en bevat die SVG zinvolle rollen, labels en groepsstructuur in plaats van anonieme <g>-nesten?
2. Standaard kleurblindveilige paletten. Zijn de categorische en sequentiële paletten standaard CVD-getest, of moet men ze handmatig overschrijven?
3. Toetsenbordnavigeerbare gegevenspunten. Kan een ziende toetsenbordgebruiker de grafiek in tabben, tussen markeringen pijlen en de waarde van elke markering lezen?
4. Schermlezer-beschrijvingshiërarchie. Is er een titel, een samenvattingszin en aankondigingen per reeks/punt — niet alleen één enkele alt-tekstdump?
5. Alternatieve tabelweergave. Zijn de onderliggende gegevens beschikbaar als HTML-tabel, gelinkt vanuit of weergegeven naast de grafiek, voor gebruikers die de voorkeur geven aan tabelconsumptie?
”Een grafiek die wordt geleverd met perfect contrast en een kleurblindveilig palet, maar zonder toetsenbordmodel, is een grafiek die men voor de helft van het publiek heeft gemaakt.”
2. De vijf bibliotheken op tafel
Vijf bibliotheken domineren in 2026 het overgrote deel van nieuw grafiekwerk: Vega-Lite, Plotly, Observable Plot, Apache ECharts en D3 met aangepaste code. Ze bevinden zich op verschillende punten op de abstractieas — Vega-Lite is het meest declaratief, D3 het meest imperatief — en elk heeft een andere houding ten opzichte van toegankelijkheid. D3 wordt apart behandeld omdat “D3 + custom” een fundamenteel andere engineering-propositie is: de toegankelijkheid die men krijgt, is de toegankelijkheid die men schrijft.
Geen van deze bibliotheken is vijandig tegenover toegankelijkheid. Alle produceren SVG (Plotly en ECharts kunnen ook canvas produceren; de SVG-modus wordt beoordeeld). Alle accepteren willekeurige kleurpaletten. De vraag is wat men krijgt bij de kleinst mogelijke hoeveelheid code, en hoeveel herschrijfwerk nodig is om van die standaard naar een grafiek te komen die WCAG 2.2 AA daadwerkelijk haalt.
De “nul stippen”-beoordeling voor D3 is geen kritiek op de bibliotheek — het is een eerlijke beschrijving van wat men krijgt bij een standaard D3-build. D3 bestaat uit primitieven. Toegankelijkheid in een D3-grafiek is wat de auteur schrijft. Een D3-grafiek geschreven door een engineer die ARIA begrijpt, kan de meest toegankelijke grafiek op de pagina zijn; een D3-grafiek geschreven zonder die kennis is bijna altijd de minst toegankelijke grafiek op de pagina.
3. De beoordelingsmatrix: bibliotheek versus toegankelijkheidsfunctie
De vijf assen uit sectie één, beoordeeld ten opzichte van de vijf bibliotheken uit sectie twee. “Ja” betekent dat het standaardgedrag de as haalt; “Gedeeltelijk” betekent dat de bibliotheek de juiste hooks biedt maar ze niet standaard inschakelt; “Handmatig” betekent dat de engineer de relevante code geheel zelf moet schrijven.
| Vega-Lite | Plotly.js | Observable Plot | Apache ECharts | D3 + custom | |
|---|---|---|---|---|---|
| SVG-uitvoer met semantische ARIA | Ja (SVG, getitelde groepen) | Ja (SVG, ARIA-labels) | Ja (SVG, markeerrollen) | Gedeeltelijk (canvas standaard; SVG-renderer opt-in) | Handmatig |
| Standaard kleurblindveilige paletten | Ja (Tableau 10 + viridis) | Gedeeltelijk (Plotly-standaard; CVD-palet opt-in) | Ja (Observable categorical10) | Gedeeltelijk (standaardschema niet CVD-getest) | Handmatig |
| Toetsenbordnavigeerbare gegevenspunten | Gedeeltelijk (focus op legenda; markeringen vereisen configuratie) | Ja (pijltoetsnavigatie in 2.x) | Gedeeltelijk (tip-plugin geeft focus; markeringen handmatig) | Gedeeltelijk (a11y-module opt-in) | Handmatig |
| Schermlezer-beschrijvingshiërarchie | Ja (description spec-eigenschap) | Gedeeltelijk (enkele titel; per punt opt-in) | Ja (ariaLabel + ariaDescription markeringen) | Gedeeltelijk (a11y-module produceert per-reeks alt) | Handmatig |
| Alternatieve tabelweergave | Gedeeltelijk (datatabellen eenvoudig te renderen) | Gedeeltelijk (export naar CSV; geen in-DOM-tabel) | Gedeeltelijk (data()-helper, geen automatische tabel) | Gedeeltelijk (toolbox ondersteunt gegevensweergave) | Handmatig |
Vega-Lite en Observable Plot leiden in declaratieve standaardinstellingen. Plotly leidt in ingebouwde toetsenbordnavigatie. ECharts heeft de meest uitgebreide opt-in toegankelijkheidsmodule van alle bibliotheken op de lijst — maar alleen als men deze inschakelt. D3 geeft niets en alles: elke cel is “handmatig” omdat de bibliotheek geen mening heeft. Geen van deze bibliotheken is een kant-en-klare oplossing; alle zijn bruikbaar met de juiste intentie.
4. Goede grafiek, slechte grafiek: dezelfde gegevens op twee manieren
De matrix toont wat elke bibliotheek biedt; deze sectie toont wat een werkende engineer daadwerkelijk schrijft. Dezelfde gegevens, twee implementaties. De “slechte” versie wordt snel gebouwd en ziet er goed uit op een 27-inch monitor. De “goede” versie vraagt 12 regels code meer en haalt elke as in de matrix.
// Vega-Lite — alleen standaardinstellingen
{
"data": { "url": "complaints.csv" },
"mark": "bar",
"encoding": {
"x": { "field": "category", "type": "nominal" },
"y": { "field": "count", "type": "quantitative" },
"color": { "field": "category" }
}
}Wordt weergegeven. Ziet er goed uit. Geen grafiektitel voor de schermlezer. Geen beschrijving. Geen toetsenbordmodel op de markeringen. Standaardkleurschema niet CVD-getest bij het werkelijke aantal categorieën. Geen terugvaloptie als tabel.
// Vega-Lite — toegankelijke standaardinstellingen
{
"title": "Klachten per oppervlak, 2024",
"description":
"Staafdiagram van 4.605 webtoegankelijkheidsklachten, gerangschikt op oppervlak. Hoogste: formulieren (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": "Klachten" },
"color": {
"field": "category",
"scale": { "scheme": "tableau10" },
"legend": { "title": "Oppervlak" }
},
"tooltip": [
{ "field": "category", "title": "Oppervlak" },
{ "field": "count", "title": "Klachten" }
]
},
"usermeta": { "embedOptions": { "ariaLabel": "Klachtendiagram" } }
}Titel, beschrijving, CVD-veilig palet, benoemde as, benoemde tooltipvelden, ARIA-rolbeschrijving op de markering. Gekoppeld aan een <table> die wordt weergegeven vanuit dezelfde dataset, haalt dit elke as in de matrix zonder de declaratieve grammatica te verlaten.
De goede grafiek is geen andere grafiek. Het is dezelfde grafiek waarbij de impliciete standaardinstellingen expliciet zijn gemaakt, de titel is opgeschreven, het palet is benoemd, de per-markeerrol is uitgeschreven, en de gegevens ook als tabel worden aangeboden. Dat is de gehele kunst.
Geen van de vijf bibliotheken levert standaard een “render deze grafiek als tabel”-modus. Het werkende patroon is: bind dezelfde gegevens aan twee componenten — de grafiek en een HTML-<table> eronder, vaak visueel verborgen maar toegankelijk voor hulptechnologie met een “Toon datatabelle”-schakelaar die een hidden-attribuut omzet. Dit patroon kost ca. 20 regels frameworkcode per grafiek en verdient zichzelf terug bij de eerste gebruikersonderzoekssessie.
5. Concrete aanbevelingen per gebruikssituatie
Bibliotheekwkeuze in 2026 draait voornamelijk om workflowfit. De vijf bibliotheken op tafel zijn alle bruikbaar. De vraag is welke aansluit bij het soort grafieken dat men daadwerkelijk levert. Vijf veelvoorkomende gebruikssituaties, vijf aanbevelingen, met het op-een-na-beste alternatief benoemd.
Redactionele / datajournalistieke grafieken (één grafiek, gepolijst)
Aanbeveling: Observable Plot, met Vega-Lite als goede tweede keus. Plots markeer-gebaseerde API geeft per-markeer-ARIA-labels gratis, het categorische palet is CVD-getest, en de SVG-uitvoer leest helder. Vega-Lite is de tweede keus omdat de description-eigenschap de schoonste single-attribute schermlezersamenvatting is van alle bibliotheken — maar Plot wint op standaard ergonomie voor eenmalige redactionele stukken.
Analist-authored dashboards (veel grafieken, declaratief)
Aanbeveling: Vega-Lite, met Observable Plot als goede tweede keus. Vega-Lites specificatiegrammatica stelt analisten in staat 30 grafieken in één notebook samen te stellen zonder JavaScript te schrijven, en de schema-eigenschappen title + description geven de schermlezer-hiërarchie zonder extra infrastructuur. Koppel elke grafiek aan een Vega-rendered datatabellen om de alternatieve-tafel-as te halen.
Wetenschappelijke / BI-dashboards (interactieve verkenning)
Aanbeveling: Plotly.js, met ECharts als goede tweede keus. Plotly is de enige bibliotheek op de lijst die standaard pijltoetsnavigatie tussen markeringen levert in de 2.x-lijn. Als het publiek verwacht te hoveren, in te zoomen en door te klikken, is Plotly’s ingebouwde toetsenbordmodel de beslissende factor. ECharts haalt in als men de aria-module inschakelt — maar men moet die inschakelen.
High-density operationele dashboards (honderden punten, prestatiekritisch)
Aanbeveling: Apache ECharts met SVG-renderer + aria-module ingeschakeld, met Plotly als goede tweede keus. ECharts heeft het sterkste prestatieverhaal in deze groep voor zeer dichte grafieken, en de aria-module produceert per-reeks alternatieve tekst die schermlezers competent verwerken. Schakel de canvas-renderer uit; canvas is sneller maar de toegankelijkheidsstructuur verdwijnt.
Maatwerk redactionele grafieken die geen bibliotheek kan renderen (uniek, eenmalig)
Aanbeveling: D3 met een handgeschreven toegankelijkheidslaag. De handgeschreven laag is niet onderhandelbaar: een <title> + <desc> bij de SVG-root, per-markeer role=“img” met aria-label, een focusmodel op elke focusbare markering, en een zusterling <table> gerenderd vanuit dezelfde dataset. D3 is het juiste gereedschap wanneer de grafiek nergens anders bestaat; het is het verkeerde gereedschap wanneer de grafiek een staafdiagram is en men uit gewoonte naar D3 greep.
De grafiek in een grafiekbibliotheek is zelden het enige element op de pagina. Tooltips die alleen op hover verschijnen en nooit bij focus, legendes die <div> zijn in plaats van <ul>, focusringen overschreven in de reset-stylesheet van de pagina, kleurstalen met onvoldoende niet-tekstcontrast ten opzichte van de paginaachtergrond — dit zijn pagina-niveau-fouten die geen grafiekbibliotheek voor u zal herstellen. De bibliotheek geeft u de markeringen; de pagina geeft u de rest.
Conclusie: de werkende stack is de stack die men opschrijft
Geen van de vijf bibliotheken op tafel is het verkeerde antwoord. Alle halen de meeste assen met een kleine hoeveelheid intentie. De meest betrouwbare voorspeller van een toegankelijke grafiek in 2026 is niet de bibliotheek op de importregel — het is of het team heeft opgeschreven, op dezelfde plek als het designsysteem, wat “toegankelijke grafiek” bij deze organisatie betekent. Titel. Beschrijving. Palet. Toetsenbordmodel. Alternatieve tabel. Vijf regels in een CONTRIBUTING.md; het verschil tussen een grafiek die wordt verzonden en een grafiek die aankomt.
Kies de bibliotheek die bij de workflow past, schakel de toegankelijkheidsstandaarden in, koppel elke grafiek aan een datatabellen, en auditeer de pagina-niveau-chrome rondom de grafiek even zorgvuldig als de grafiek zelf. De standaardgrafiek van elke bibliotheek kan toegankelijk worden gemaakt. De standaardgrafiek van geen enkele bibliotheek is toegankelijk zonder intentie.
”De bibliotheek geeft u de markeringen; de pagina geeft u de rest.”