Grafieken bouwen die voor iedereen werken

Het grafiekprobleem

Grafieken en diagrammen zijn van nature visuele objecten. Ze coderen informatie via vorm, positie en kleur — drie kanalen die voor een aanzienlijk deel van je publiek betekenisloos of vervormd zijn.

Ongeveer 8% van de mannen heeft een vorm van kleurenblindheid. Schermlezergebruikers krijgen geen zinvolle informatie uit een SVG-staafdiagram, tenzij de ontwikkelaar die expliciet heeft toegevoegd. En toetsenbordgebruikers kunnen interactieve grafieken vaak helemaal niet bereiken.

Het resultaat: datavisualisatie is waarschijnlijk het gebied van webdesign waar de kloof tussen wat ziende gebruikers ervaren en wat alle anderen ervaren het grootst is. En het is een kloof die organisaties zelden opmerken, omdat toegankelijkheidsaudits zich eerst richten op formulieren en navigatie voordat ze toekomen aan de grafieken op de rapportagepagina.

Deze gids behandelt wat toegankelijke datavisualisatie werkelijk vereist — geen checklist, maar inzicht in waarom grafieken falen en wat je eraan kunt doen.

Waarom grafieken zo lastig zijn

De meeste HTML-elementen hebben een native rol, naam en status die hulptechnologie begrijpt. Een <button> is een knop. Een <table> is een tabel met rijen en kolommen. Een formulierveld heeft een label.

Een grafiek die als SVG of canvas wordt gerenderd, heeft niets van dit alles. Het is een tekening. Schermlezers zien een afbeelding (als je geluk hebt) of helemaal niets. De ontwikkelaar moet de semantische laag volledig zelf reconstrueren.

Tegelijkertijd zijn grafieken vaak de belangrijkste content op een pagina. Een staafdiagram met de maandelijkse omzet, een lijngrafiek die de gebruikersgroei volgt, een cirkeldiagram met de verdeling per categorie — dit is vaak de reden waarom de gebruiker op de pagina is. Deze content uitsluiten voor een aanzienlijk deel van je bezoekers is een serieus probleem, geen klein ongemak.

Het kleurprobleem: vertrouw nooit op kleur alleen

De meest voorkomende toegankelijkheidsfout bij grafieken is het gebruik van kleur als enige manier om dataseries of categorieën van elkaar te onderscheiden.

Een lijngrafiek met vier lijnen die alleen door kleur worden onderscheiden — rood, blauw, groen, oranje — is onleesbaar voor veel gebruikers met kleurenblindheid, en volledig betekenisloos voor iedereen die een hoogcontrastmodus of een grijstintenweergave gebruikt.

De oplossing is redundante codering: gebruik kleur plus minstens één andere visuele eigenschap.

• Lijngrafieken: gebruik verschillende streeppatronen naast kleuren (doorgetrokken, gestreept, gestippeld, streep-punt)
• Staafdiagrammen: gebruik texturen of patronen naast kleuren, of plaats datalabels direct op de staven
• Spreidingsdiagrammen: gebruik verschillende markervormen (cirkel, vierkant, driehoek, ruit) naast kleuren
• Cirkeldiagrammen: voeg tekstlabels toe in of naast elk segment — vertrouw nooit alleen op een legenda

Dit valt onder WCAG 2.2 1.4.1 Gebruik van kleur (niveau A): kleur mag niet het enige middel zijn om informatie over te brengen.

Contrast voor grafieken

Niet-tekstuele visuele elementen zoals staven, lijnen en datapunten moeten een contrast van 3:1 ten opzichte van hun achtergrond halen volgens 1.4.11 Contrast van niet-tekstuele content (niveau AA). Test je grafiekpalet met een contrastchecker — veel merkpaletten die er in grote vlakken prima uitzien, voldoen bij kleinere formaten niet aan deze eis.

Tekst binnen grafieken — aslabels, datalabels, legenda’s — moet aan dezelfde contrasteisen voldoen als lopende tekst: 4,5:1 voor normale tekst, 3:1 voor grote tekst volgens 1.4.3 Contrast (minimum).

Tekstalternatieven bieden

Elke grafiek heeft een tekstalternatief nodig dat de weergegeven data overbrengt. Welke vorm dat precies aanneemt, hangt af van hoe complex de data is.

Eenvoudige grafieken: beschrijvende alt-tekst

Voor een staafdiagram met vijf waarden kan een goed geschreven alt-attribuut de belangrijkste bevinding samenvatten:

<img
  src="monthly-revenue.png"
  alt="Monthly revenue Q1 2025: Jan £42k, Feb £38k, Mar £51k,
       Apr £49k, May £56k. Steady upward trend from February onwards."
>

De alt-tekst doet hier twee dingen: hij noemt de datapunten en vat het belangrijkste inzicht samen. Beschrijf de grafiek niet alleen visueel (“een staafdiagram met omzet”). Beschrijf wat de grafiek communiceert.

Complexe grafieken: aanvullende datatabellen

Wanneer een grafiek meer data bevat dan in een alt-attribuut past, bied dan in de buurt een toegankelijke datatabel aan. Dit helpt ook mensen die tabelgegevens verkiezen boven visuele weergaven. De tabel mag standaard verborgen zijn, zolang hij maar bereikbaar is:

<figure>
  <figcaption>Revenue by region, Q1 2025</figcaption>
  <svg aria-labelledby="chart-title" aria-describedby="chart-desc" role="img">
    <title id="chart-title">Revenue by region, Q1 2025</title>
    <desc id="chart-desc">Bar chart showing UK leading with £180k,
    followed by DE at £124k, FR at £98k, and NL at £71k.</desc>
    <!-- chart content -->
  </svg>
  <details>
    <summary>View as table</summary>
    <table>
      <caption>Revenue by region, Q1 2025</caption>
      <thead><tr><th>Region</th><th>Revenue</th></tr></thead>
      <tbody>
        <tr><td>UK</td><td>£180,000</td></tr>
        <tr><td>DE</td><td>£124,000</td></tr>
        <tr><td>FR</td><td>£98,000</td></tr>
        <tr><td>NL</td><td>£71,000</td></tr>
      </tbody>
    </table>
  </details>
</figure>

SVG-specifieke patronen

SVG-grafieken die inline worden gerenderd (in plaats van als afbeeldingsbestanden) kunnen direct toegankelijk worden gemaakt met ARIA. De belangrijkste patronen:

• Voeg role="img" toe aan het <svg>-element
• Plaats een <title> als eerste kind van <svg> en koppel deze met aria-labelledby
• Voeg een <desc> toe voor langere beschrijvingen en koppel deze met aria-describedby
• Markeer decoratieve elementen (rasterlijnen, schaalstreepjes) met aria-hidden="true" om ruis te verminderen

Voor interactieve grafieken waarin gebruikers datapunten kunnen selecteren, heeft elk interactief element een correcte rol, naam en toetsenbordondersteuning nodig.

Toetsenbordnavigatie voor interactieve grafieken

Als je grafieken interactief zijn — tooltips bij hover, klikbare segmenten, selecteren en zoomen — moeten ze volledig met het toetsenbord bedienbaar zijn volgens 2.1.1 Toetsenbord (niveau A).

Voor grafieken met veel datapunten implementeer je een roving tabindex-patroon: slechts één element in de grafiek zit tegelijk in de tabvolgorde, en met de pijltjestoetsen beweeg je tussen de datapunten binnen de grafiek.

<!-- Each bar is a button, navigable with arrow keys -->
<g role="group" aria-label="Monthly revenue bars">
  <rect
    role="button"
    tabindex="0"
    aria-label="January: £42,000"
    onkeydown="handleChartKey(event)"
    ...
  />
</g>

Tooltips die alleen bij hover verschijnen, moeten ook verschijnen bij toetsenbordfocus. Een tooltip die alleen zichtbaar is voor muisgebruikers is een toegankelijkheidsfout.

Het juiste grafiektype kiezen

Sommige grafiektypen zijn van nature toegankelijker dan andere. Wanneer je de keuze hebt:

Grafiektype	Toegankelijkheid	Opmerkingen
Staafdiagram	Hoog	Waarden zijn eenvoudig te coderen met labels; goede toetsenbordondersteuning mogelijk
Lijngrafiek	Hoog	Gebruik verschillende streeppatronen; annoteer belangrijke punten
Tabel	Hoogst	Het eenvoudigst toegankelijk te maken; vaak de juiste keuze voor data
Spreidingsdiagram	Gemiddeld	Vereist zorgvuldige markerdifferentiatie; toetsenbordnavigatie is complex
Heatmap	Laag	Van nature afhankelijk van kleur; bied altijd een tabelalternatief
Cirkel/donut	Laag	Waarden zijn moeilijk te vergelijken; vermijd bij meer dan 3-4 segmenten

Bij twijfel is een goed opgemaakte tabel bijna altijd toegankelijker dan een grafiek — en vaak makkelijker te lezen, beperking of niet. Gebruik geen grafiek omdat die er modern uitziet; gebruik er een wanneer die gebruikers oprecht helpt om een trend of vergelijking sneller te begrijpen dan tabelgegevens zouden doen.

Je grafieken testen

Geautomatiseerde toegankelijkheidsscanners kunnen controleren op ontbrekende alt-attributen en sommige ARIA-patronen, maar ze kunnen niet verifiëren dat grafiekdata betekenisvol is, dat toetsenbordnavigatie correct werkt, of dat de grafiek begrijpelijk is voor een schermlezergebruiker. Test met:

1. Een schermlezer (NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari): navigeer naar de grafiek en controleer wat er wordt voorgelezen
2. Alleen het toetsenbord: tab naar de grafiek en bevestig dat alle interactieve elementen bereikbaar en bedienbaar zijn met het toetsenbord
3. Kleurenblindheidssimulatie: gebruik Chrome DevTools (Rendering > Emulate vision deficiency) om te zien hoe de grafiek eruitziet bij verschillende vormen van kleurenblindheid
4. Zoom naar 200%: controleer dat labels en legenda’s elkaar niet overlappen en niet worden afgekapt

Onze dienst voor schermlezerevaluatie test grafieken met echte gebruikers van hulptechnologie — de snelste manier om te ontdekken wat je gebruikers werkelijk ervaren.