E-mailaccessibiliteit: Ontwerp e-mails die iedereen kan lezen
Meer dan 1 miljard mensen hebben een beperking. Zo maak je e-mails die echt voor iedereen werken — van screenreaders tot kleurenblindheid.
# E-mailaccessibiliteit: Ontwerp e-mails die iedereen kan lezen
Het onzichtbare probleem
Stel je voor: je hebt zojuist de perfecte marketing-e-mail verstuurd. Prachtig design, scherpe copy, een onweerstaanbare CTA-button. Maar voor 15% van je ontvangers is die e-mail onbruikbaar. Niet vanwege spamfilters of rendering-bugs — maar omdat ze een beperking hebben en je e-mail daar geen rekening mee houdt.
Volgens de Wereldgezondheidsorganisatie leven meer dan 1,3 miljard mensen wereldwijd met een significante beperking. Dat is 16% van de wereldbevolking. In Nederland alleen al hebben circa 2 miljoen mensen een visuele beperking, en meer dan 600.000 mensen zijn slechthorend of doof.
En dan hebben we het nog niet over situationele beperkingen: iemand die e-mail leest in fel zonlicht, met één hand terwijl ze een kind vasthouden, of in een lawaaierige omgeving. Accessibility helpt iedereen.
Waarom dit voor jouw bedrijf belangrijk is
1. Wettelijke vereisten
De European Accessibility Act (EAA) treedt op 28 juni 2025 volledig in werking. Dit betekent dat digitale diensten — inclusief e-mailcommunicatie van commerciële organisaties — aan WCAG 2.1 AA-normen moeten voldoen. Overtredingen kunnen leiden tot boetes tot €100.000 per geval in Nederland.
2. Bereik en conversie
Toegankelijke e-mails presteren simpelweg beter:
Bron: geaggregeerde data uit toegankelijkheidstests bij e-mailmarketingplatforms (2024-2025).
3. Merkperceptie
Uit onderzoek van Microsoft blijkt dat 71% van de consumenten merken positiever beoordeelt die blijk geven van inclusiviteit. Toegankelijke e-mail is geen kostenpost — het is branding.
De technische basis: semantische HTML
De allerbelangrijkste stap is het gebruik van semantische HTML in je e-mails. Screenreaders zoals JAWS, NVDA en VoiceOver interpreteren de HTML-structuur om inhoud aan gebruikers voor te lezen.
Wat je WEL moet doen
html<!-- Correcte documentstructuur --> <html lang="nl"> <head> <meta charset="UTF-8"> <title>Uw maandelijkse update van MailBelly</title> </head> <body> <table role="presentation" width="100%"> <tr> <td> <!-- Gebruik semantische tags waar mogelijk --> <h1>Uw maart-update</h1> <p>Beste klant, hier zijn uw statistieken.</p> <!-- Afbeeldingen altijd met alt-tekst --> <img src="stats.png" alt="Grafiek: 94% deliverability, 12% open rate" width="600" height="300"> <!-- CTA als link, niet als afbeelding --> <a href="https://app.mailbelly.com/dashboard" style="background:#2563eb; color:#ffffff; padding:14px 28px; border-radius:6px; text-decoration:none; font-weight:bold; display:inline-block;"> Bekijk uw dashboard → </a> </td> </tr> </table> </body> </html>
Wat je NIET moet doen
html<!-- ❌ Geen taalattribuut --> <html> <!-- ❌ Afbeelding zonder alt-tekst --> <img src="header.png"> <!-- ❌ CTA als afbeelding --> <img src="button.png" alt=""> <!-- ❌ Tabel voor layout zonder role="presentation" --> <table> <tr><td>Kolom 1</td><td>Kolom 2</td></tr> </table> <!-- ❌ Alleen kleur om info over te brengen --> <span style="color: red;">Belangrijk!</span>
Kleur en contrast
Kleurenblindheid treft 8% van alle mannen en 0,5% van alle vrouwen. De meest voorkomende vorm is rood-groenblindheid (deuteranopie en protanopie).
Contrastvereisten (WCAG 2.1 AA)
| Element | Minimale contrastverhouding |
|---|---|
| Normale tekst (< 18px) | 4.5:1 |
| Grote tekst (≥ 18px / 14px bold) | 3:1 |
| UI-componenten (knoppen, links) | 3:1 |
| Niet-tekstuele elementen (iconen) | 3:1 |
Praktijkvoorbeelden
css/* ✅ Goed: hoog contrast */ body { color: #1a1a1a; background: #ffffff; } /* ratio 16.6:1 */ a { color: #1e40af; } /* ratio 9.4:1 op wit */ /* ❌ Slecht: onvoldoende contrast */ body { color: #999999; background: #ffffff; } /* ratio 2.8:1 */ a { color: #93c5fd; } /* ratio 2.1:1 op wit — onleesbaar */
Kleur nooit als enige indicator
Gebruik nooit alleen kleur om informatie over te brengen. Combineer altijd met tekst, iconen of patronen:
html<!-- ❌ Alleen kleur --> <td style="background: #ef4444;">3.2%</td> <td style="background: #22c55e;">7.8%</td> <!-- ✅ Kleur + tekst + icoon --> <td style="background: #fef2f2; color: #991b1b;"> ↓ 3.2% (gedaald) </td> <td style="background: #f0fdf4; color: #166534;"> ↑ 7.8% (gestegen) </td>
Screenreader-optimalisatie
Alt-tekst schrijven die werkt
Alt-tekst is een kunst. Hier zijn de regels:
- Decoratieve afbeeldingen:
alt=""(leeg, niet weglaten) - Informatieve afbeeldingen: beschrijf de informatie, niet het uiterlijk
- Grafieken: geef de data in tekst weer
- CTA-afbeeldingen: vermijd ze — gebruik gestylede links
html<!-- Decoratief: horizontale lijn --> <img src="divider.png" alt="" role="presentation"> <!-- Informatief: logo --> <img src="mailbelly-logo.png" alt="MailBelly"> <!-- Grafiek: beschrijf de data --> <img src="trend.png" alt="E-mail open rate trend: januari 21%, februari 23%, maart 27%. Stijgende lijn over drie maanden.">
Leesorde en `role`-attributen
E-mails gebruiken vaak tabellen voor layout. Screenreaders proberen tabellen als data te interpreteren tenzij je ze anders markeert:
html<!-- Layout-tabel: vertel screenreader dat het geen data is --> <table role="presentation"> <tr> <td> <table role="presentation"> <tr> <td>Linkerkant</td> <td>Rechterkant</td> </tr> </table> </td> </tr> </table> <!-- Echte datatabel: gebruik headers --> <table> <caption>Uw e-mailprestaties deze maand</caption> <thead> <tr> <th scope="col">Campagne</th> <th scope="col">Verzonden</th> <th scope="col">Open rate</th> </tr> </thead> <tbody> <tr> <td>Maart nieuwsbrief</td> <td>12.450</td> <td>24,3%</td> </tr> </tbody> </table>
Typografie en leesbaarheid
Lettergrootte en regelhoogte
| Parameter | Minimum | Aanbevolen |
|---|---|---|
| Body tekst | 14px | 16px |
| Koppen (H1) | 22px | 24-28px |
| Regelhoogte | 1.4 | 1.5-1.6 |
| Alinea-afstand | 12px | 16-20px |
| Regellengte | — | 50-75 tekens |
Lettertype-keuzes
Gebruik system fonts of breed beschikbare webfonts:
css/* Veilige, leesbare fontstapel */ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Vermijd: - Dunne gewichten (< 400) voor body tekst - Decoratieve/script fonts - Tekst als afbeelding - VOLLEDIG IN HOOFDLETTERS voor meer dan 1 regel */
Interactieve elementen
Klikbare gebieden
Touch-targets moeten minimaal 44x44 pixels zijn (WCAG 2.5.5). Dit geldt voor knoppen, links en alle interactieve elementen.
html<!-- ✅ Groot genoeg touch-target --> <a href="https://app.mailbelly.com" style="display: inline-block; padding: 14px 28px; min-height: 44px; min-width: 44px; font-size: 16px; font-weight: 600;"> Open MailBelly </a> <!-- ❌ Te klein --> <a href="https://app.mailbelly.com" style="font-size: 11px; padding: 4px 8px;"> klik </a>
Linktekst
Screenreaders kunnen alle links op een pagina opsommen. "Klik hier" of "Lees meer" is dan zinloos.
html<!-- ❌ Niet-beschrijvende links --> <a href="/blog/spf">Klik hier</a> <a href="/blog/dkim">Lees meer</a> <!-- ✅ Beschrijvende links --> <a href="/blog/spf">Leer hoe SPF uw aflevering verbetert</a> <a href="/blog/dkim">Onze complete DKIM-configuratiegids</a>
Dark mode en hoog contrast
Steeds meer e-mailclients ondersteunen dark mode. Als je e-mail er niet goed uitziet in dark mode, verlies je lezers.
html<head> <style> /* Light mode standaard */ .email-body { background-color: #ffffff; color: #1a1a1a; } /* Dark mode override */ @media (prefers-color-scheme: dark) { .email-body { background-color: #1a1a2e !important; color: #e2e8f0 !important; } .email-body a { color: #60a5fa !important; } .email-body img { opacity: 0.9; } } /* Hoog contrast modus */ @media (prefers-contrast: more) { .email-body { color: #000000 !important; background: #ffffff !important; } .email-body a { color: #0000ee !important; text-decoration: underline !important; } } </style> </head>
Let op: niet alle e-mailclients ondersteunen prefers-color-scheme. Gmail op Android forceert soms zijn eigen dark mode. Zorg daarom altijd voor inline fallback-kleuren die in beide modi werken.
Testen en valideren
Handmatige tests
- Tab-navigatie: Kun je door alle links navigeren met alleen het toetsenbord?
- Screenreader: Test met VoiceOver (Mac/iOS), NVDA (Windows) of TalkBack (Android)
- Zoom 200%: Is alle content nog leesbaar bij 200% zoom?
- Grayscale: Bekijk je e-mail in grijstinten — is alle info nog duidelijk?
Geautomatiseerde tools
| Tool | Wat het test | Gratis? |
|---|---|---|
| Litmus Accessibility Check | WCAG-compliance in e-mail | Gedeeltelijk |
| Email on Acid | Rendering + accessibility | Nee |
| axe DevTools | HTML accessibility | Ja |
| Colour Contrast Analyser | WCAG-contrastverhouding | Ja |
| WAVE | Webpagina-accessibility | Ja |
MailBelly's aanpak
Bij MailBelly bouwen we accessibility direct in het platform:
- Automatische alt-tekst suggesties via AI voor afbeeldingen in je e-mails
- Contrastchecker in de template-editor die waarschuwt bij onvoldoende contrast
- Screenreader-preview zodat je hoort hoe je e-mail klinkt
- WCAG-compliancerapport bij elke campagne
Checklist: toegankelijke e-mail in 10 stappen
- ✅ Stel
lang-attribuut in op het<html>-element - ✅ Gebruik semantische HTML (
<h1>,<p>,<table>met<th>) - ✅ Voeg betekenisvolle
alt-tekst toe aan alle afbeeldingen - ✅ Markeer layout-tabellen met
role="presentation" - ✅ Zorg voor minimaal 4.5:1 contrastverhouding
- ✅ Gebruik nooit alleen kleur om informatie over te brengen
- ✅ Maak touch-targets minimaal 44x44 pixels
- ✅ Gebruik beschrijvende linktekst (geen "klik hier")
- ✅ Test met een screenreader
- ✅ Test in dark mode en bij 200% zoom
Conclusie
E-mailaccessibiliteit is geen optioneel extraatje — het is een fundamenteel onderdeel van goed e-mailontwerp. Met de EAA die nu actief is, is het ook een wettelijke verplichting.
Het goede nieuws: de meeste accessibility-verbeteringen zijn eenvoudig te implementeren en verbeteren de ervaring voor alle ontvangers. Hogere open rates, betere click-through, minder uitschrijvingen — toegankelijkheid en prestatie gaan hand in hand.
Begin vandaag. Neem de checklist door voor je volgende campagne. Je toekomstige zelf — en 1,3 miljard mensen wereldwijd — zullen je dankbaar zijn.