{"id":175056,"date":"2025-07-24T17:08:42","date_gmt":"2025-07-24T15:08:42","guid":{"rendered":"https:\/\/spotler.com\/blog\/wcag-make-emails-accessible"},"modified":"2025-07-31T11:23:42","modified_gmt":"2025-07-31T09:23:42","slug":"wcag-emails-toegankelijk-maken","status":"publish","type":"blog","link":"https:\/\/spotler.com\/nl-nl\/blog\/wcag-emails-toegankelijk-maken","title":{"rendered":"Waarom moeten je e-mails toegankelijk zijn, en hoe doe je dat?"},"content":{"rendered":"<p><strong>De WCAG-richtlijnen (Web Content Accessibility Guidelines) zijn voor veel mensen inmiddels geen onbekend terrein meer. Overal op het internet vind je tips, tricks, tools en regels, maar het is vaak zo veel informatie dat het snel onoverzichtelijk kan worden. Herkenbaar, toch? Bij Spotler hebben we daarom de tijd genomen om alles samen te brengen in een blog. Dus in deze blog lees je wat e-mailtoegankelijkheid is, waarom het belangrijk is en hoe je jouw e-mails vandaag nog toegankelijk kunt maken!<\/strong><\/p>\n<h2 class=\"wp-block-heading\">Wat is e-mailtoegankelijkheid?<\/h2>\n<p>E-mailtoegankelijkheid betekent dat iedereen je e-mail kan lezen, gebruiken en er doorheen kan navigeren, ongeacht beperkingen of het gebruik van assistieve technologie. En dat is belangrijk, want in Europa heeft ongeveer 1 op de 4 mensen een beperking. Dit kan gaan om visuele beperkingen zoals kleurenblindheid of slechtziendheid, maar ook om motorische of cognitieve beperkingen.<\/p>\n<p>Als je weet dat 25% van je ontvangers misschien extra moeite heeft om je e-mail te lezen, begrijp je meteen waarom je hier rekening mee moet houden. Het gaat hierbij niet alleen om tekst, maar ook om kleuren, lettertypen, afbeeldingen en de algehele indeling van je nieuwsbrief of campagne.<\/p>\n<h3 class=\"wp-block-heading\">Waarom is het belangrijk?<\/h3>\n<p>Zijn je e-mails niet toegankelijk? Dan loop je mogelijk een flink deel van je doelgroep mis. Denk aan mensen met kleurenblindheid die bepaalde combinaties niet goed kunnen zien, of mensen met epilepsie die gevoelig zijn voor flikkerende beelden.<\/p>\n<p>Door je e-mails w\u00e9l toegankelijk te maken, zorg je dat je boodschap iedereen bereikt, zonder iemand uit te sluiten. En het laat zien waar je als merk voor staat: empathie, inclusiviteit en klantgerichtheid. Ook al doe je hier onderzoek naar vanwege wet- en regelgeving, het is vooral ook een kwestie van moraliteit. Het is simpelweg belangrijk om iedereen mee te nemen.<\/p>\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"500\" src=\"https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/inaccessible_example.webp\" alt=\"Our old emails (scoring low in accessibility)\" class=\"wp-image-175039\" style=\"object-fit:cover\" srcset=\"https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/inaccessible_example.webp 500w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/inaccessible_example-300x300.webp 300w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/inaccessible_example-150x150.webp 150w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/inaccessible_example-190x190.webp 190w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/inaccessible_example-44x44.webp 44w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><figcaption class=\"wp-element-caption\">Onze <strong>oude e-mails<\/strong> (lage score)<\/figcaption><\/figure>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"500\" src=\"https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/accessible_example.webp\" alt=\"\" class=\"wp-image-175046\" srcset=\"https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/accessible_example.webp 500w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/accessible_example-300x300.webp 300w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/accessible_example-150x150.webp 150w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/accessible_example-190x190.webp 190w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/accessible_example-44x44.webp 44w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><figcaption class=\"wp-element-caption\">Onze <strong>nieuwe e-mails<\/strong> (hogere score)<\/figcaption><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\">Wat zijn dan de best practices?<\/h2>\n<p>Zoals al eerder genoemd heeft het met van alles te maken. Hieronder een lijst met alle best practices:<\/p>\n<ul class=\"wp-block-list\">\n<li>Houd rekening met visuele aspecten van toegankelijkheid in ontwerp<\/li>\n<li>Gebruik kleur op een slimme manier<\/li>\n<li>Zorg voor een balans tussen tekst en afbeeldingen<\/li>\n<li>Gebruik grotere lettergroottes<\/li>\n<li>Geef de tekst voldoende witruimte<\/li>\n<li>Vermijd uitgevulde tekst (geforceerde uitlijning)<\/li>\n<li>Kies het juiste lettertype<\/li>\n<li>Gebruik semantische elementen<\/li>\n<li>Verbeter de leesbaarheid<\/li>\n<li>Maak links goed aanklikbaar<\/li>\n<li>Vermijd linkteksten zoals &#8216;klik hier&#8217;<\/li>\n<li>Gebruik ALT-teksten op de juiste manier<\/li>\n<\/ul>\n<h3 class=\"wp-block-heading\">Kleurgebruik in mailings<\/h3>\n<p>Een goede leesbaarheid begint bij voldoende kleurcontrast. Het contrast tussen tekst en achtergrond moet sterk genoeg zijn, zodat iedereen je e-mail goed kan lezen \u2013 ook mensen met een visuele beperking.<\/p>\n<p>Volgens de WCAG-richtlijnen moet het contrast <strong>minstens 4.5:1 zijn voor gewone tekst<\/strong> en <strong>3:1 voor grote tekst<\/strong> (18px of groter). Zo zorg je ervoor dat je boodschap voor iedereen zichtbaar is. Als je niet zeker weet of je aan deze eisen voldoet, kun je onze <a href=\"https:\/\/spotler.com\/nl-nl\/essentials\/kleurcontrast-checker\" target=\"_blank\" data-type=\"essentials\" data-id=\"175507\" rel=\"noreferrer noopener\">contrasttool gebruiken om het te controleren<\/a>.<\/p>\n<div class=\"wp-block-group has-light-blue-background-color has-background is-vertical is-layout-flex wp-container-core-group-is-layout-8cf370e7 wp-block-group-is-layout-flex\">\n<p class=\"has-light-blue-background-color has-background\"><strong>Een praktisch voorbeeld<\/strong>: De drie afbeeldingen hieronder zijn getest met onze merkkleuren. De linker (wit op lichtblauw) is vrij moeilijk te onderscheiden: <strong>2,52:1<\/strong>. In de afbeelding rechts is het contrast tussen tekst en achtergrond hoger en is de tekst beter leesbaar: <strong>5,8:1<\/strong>. Dat maakt een wereld van verschil. Natuurlijk zorgt een donkere achtergrond voor een beter contrast, zoals de afbeelding rechts: <strong>14,6:1<\/strong>.<\/p>\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"941\" height=\"691\" src=\"https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome_bluewhite.webp\" alt=\"Contrast ratio check for white text on light blue background, not accessible.\" class=\"wp-image-174803\" style=\"object-fit:cover\" srcset=\"https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome_bluewhite.webp 941w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome_bluewhite-300x220.webp 300w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome_bluewhite-768x564.webp 768w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome_bluewhite-767x563.webp 767w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome_bluewhite-259x190.webp 259w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome_bluewhite-44x32.webp 44w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome_bluewhite-817x600.webp 817w\" sizes=\"auto, (max-width: 941px) 100vw, 941px\" \/><figcaption class=\"wp-element-caption\"><strong>2.52:1<\/strong> (does <em>not <\/em>pass)<\/figcaption><\/figure>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"941\" height=\"691\" src=\"https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome.webp\" alt=\"Contrast ratio check for dark text on light blue background, fairly accessible.\" class=\"wp-image-174796\" srcset=\"https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome.webp 941w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome-300x220.webp 300w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome-768x564.webp 768w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome-767x563.webp 767w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome-259x190.webp 259w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome-44x32.webp 44w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome-817x600.webp 817w\" sizes=\"auto, (max-width: 941px) 100vw, 941px\" \/><figcaption class=\"wp-element-caption\"><strong>5.8:1<\/strong> (AA)<\/figcaption><\/figure>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"941\" height=\"691\" src=\"https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome_darkbluewhite.webp\" alt=\"Contrast ratio check for white text on dark blue background, very accessible.\" class=\"wp-image-174810\" srcset=\"https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome_darkbluewhite.webp 941w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome_darkbluewhite-300x220.webp 300w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome_darkbluewhite-768x564.webp 768w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome_darkbluewhite-767x563.webp 767w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome_darkbluewhite-259x190.webp 259w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome_darkbluewhite-44x32.webp 44w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/welcome_darkbluewhite-817x600.webp 817w\" sizes=\"auto, (max-width: 941px) 100vw, 941px\" \/><figcaption class=\"wp-element-caption\"><strong>14.6:1<\/strong> (AAA)<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<h3 class=\"wp-block-heading\">Tekst en leesbaarheid<\/h3>\n<p>Naast kleur speelt tekst een cruciale rol in je e-mail. Niet alleen om je boodschap over te brengen aan de lezer, maar ook voor mensen die hulpmiddelen zoals schermlezers gebruiken.<\/p>\n<p>Zorg dat je tekst duidelijk en makkelijk te begrijpen is. Belangrijke informatie moet direct opvallen. Dat doe je met duidelijke koppen, korte alinea\u2019s en opsommingen.<\/p>\n<p>Tip: vermijd lange tekstblokken. Deel je content op in korte zinnen en gebruik koppen zoals <em>\u201cWat moet je weten\u201d<\/em> of <em>\u201cZo profiteer je ervan\u201d<\/em> \u2013 zo houd je het overzichtelijk voor iedereen.<\/p>\n<p><strong>Let ook op je lettertype en -grootte.<\/strong><br \/>De WCAG adviseert een minimum lettergrootte van <strong>16px<\/strong> voor gewone tekst, zodat deze goed leesbaar is op elk scherm. Kies daarnaast voor een <strong>schoon, goed leesbaar lettertype<\/strong> zonder al te veel versieringen (zoals schreefloze fonts). Vermijd schuingedrukte of versierde tekst voor langere stukken, want die maken het moeilijker te lezen \u2013 zeker voor mensen met een visuele beperking of dyslexie.<\/p>\n<p>Zo zorg je dat jouw e-mail voor iedereen toegankelijk \u00e9n prettig leesbaar is.<\/p>\n<h3 class=\"wp-block-heading\">&nbsp;<\/h3>\n<h3 class=\"wp-block-heading\">Afbeeldingen en Alt-tekst<\/h3>\n<p>Afbeeldingen maken je e-mail vaak visueel aantrekkelijker. Maar voor mensen die een schermlezer gebruiken, zijn ze niet altijd vanzelfsprekend. Daarom is het belangrijk om <strong>alt-teksten<\/strong> toe te voegen: korte beschrijvingen die uitleggen wat het doel of de inhoud van een afbeelding is.<\/p>\n<p>We onderscheiden vier soorten afbeeldingen:<\/p>\n<ul class=\"wp-block-list\">\n<li><strong>Tekst<\/strong> \u2013 Bevat een boodschap of oproep tot actie.<\/li>\n<li><strong>Functioneel<\/strong> \u2013 Klikbare afbeeldingen, zoals knoppen of links.<\/li>\n<li><strong>Informatief<\/strong> \u2013 Geeft extra informatie die niet in de hoofdtekst staat.<\/li>\n<li><strong>Decoratief<\/strong> \u2013 Alleen voor de sfeer of visuele opmaak, zonder betekenisvolle inhoud.<\/li>\n<\/ul>\n<p>Let op: <strong>gebruik liever geen tekst in afbeeldingen<\/strong>. Die is namelijk niet voor iedereen leesbaar.<\/p>\n<p>Voor <strong>functionele<\/strong> en <strong>informatieve<\/strong> afbeeldingen is een duidelijke alt-tekst essentieel. Bij <strong>decoratieve<\/strong> afbeeldingen is dat niet nodig, hier volstaat alt=&#8221;&#8221; in de HTML-code.<\/p>\n<div class=\"wp-block-group has-light-green-background-color has-background is-vertical is-layout-flex wp-container-core-group-is-layout-8cf370e7 wp-block-group-is-layout-flex\">\n<p class=\"has-light-green-background-color has-background\"><strong>Voorbeeld:<\/strong> Als je een productfoto toont en de afbeelding kan niet worden geladen, dan zorgt een duidelijke <strong>ALT-tekst<\/strong> ervoor dat de lezer toch begrijpt wat er wordt getoond:<\/p>\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"147\" src=\"https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/alt-text.webp\" alt=\"WCAG compliant email image ALT text.\" class=\"wp-image-175027\" style=\"width:697px;height:auto\" srcset=\"https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/alt-text.webp 768w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/alt-text-300x57.webp 300w, https:\/\/spotler.com\/wp-content\/uploads\/2025\/07\/alt-text-44x8.webp 44w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><figcaption class=\"wp-element-caption\">Deze e-mail met productreviews, verzonden door Coolblue, vertelt je welke afbeelding naar verwachting wordt geladen.<\/figcaption><\/figure>\n<\/div>\n<h3 class=\"wp-block-heading\">Links en buttons<\/h3>\n<p>Linkjes in je e-mail moeten niet alleen klikbaar zijn, maar ook duidelijk, toegankelijk en begrijpelijk voor iedereen. Dat betekent:<\/p>\n<ul class=\"wp-block-list\">\n<li><strong>Gebruik beschrijvende linkteksten<\/strong><br \/>Vermijd vage teksten als <em>\u201cklik hier\u201d<\/em>. Kies liever voor iets als <em>\u201cBekijk de whitepaper\u201d<\/em> of <em>\u201cMeld je aan voor het webinar\u201d<\/em>. Zo weet de lezer \u2013 \u00e9n een schermlezer \u2013 meteen waar de link naartoe leidt.<\/li>\n<li><strong>Maak de link visueel herkenbaar<\/strong><br \/>Zorg dat je link eruitziet als een link. Bijvoorbeeld met een andere kleur \u00e9n onderstreping. Alleen kleur is niet voldoende, want mensen met kleurenblindheid kunnen het verschil dan niet zien.<\/li>\n<li><strong>Let op kleurcontrast<\/strong><br \/>De linkkleur moet genoeg contrast hebben met de achtergrond \u00e9n de omliggende tekst. WCAG adviseert een contrast van minstens 4.5:1 voor gewone tekst.<\/li>\n<li><strong>Maak het klikbaar oppervlak groot genoeg<\/strong><br \/>Zorg dat de link makkelijk aan te klikken is, ook op mobiel. Kleine linkjes of te weinig witruimte eromheen maken dat lastig.<\/li>\n<\/ul>\n<p>Met deze tips maak je je e-mail niet alleen gebruiksvriendelijker, maar ook inclusiever. En dat is altijd winst.<\/p>\n<h2 class=\"wp-block-heading\">Testen op toegankelijkheid<\/h2>\n<p>Als je eenmaal je e-mail hebt geoptimaliseerd, is het belangrijk om toegankelijkheidstests uit te voeren. Gebruik tools zoals WAVE, Axe of <a href=\"https:\/\/mailplus.spotler.help\/hc\/nl\/articles\/27846624546066-Test-center\" target=\"_blank\" rel=\"noreferrer noopener\">onze eigen tools<\/a> om te controleren of alles voldoet aan de richtlijnen. Maar vergeet niet om je e-mail ook te testen met een schermlezer om er zeker van te zijn dat alle tekst goed wordt voorgelezen en de structuur logisch is.<\/p>\n<h2 class=\"wp-block-heading\">Samenvattend<\/h2>\n<p>E-mailtoegankelijkheid gaat verder dan simpelweg een mooi design; het is een kwestie van <strong>inclusiviteit<\/strong>. Door rekening te houden met de WCAG-richtlijnen, maak je je e-mailcampagnes toegankelijk voor een breed publiek. Denk aan kleurcontrast, tekstgrootte, de toevoeging van alt-teksten voor afbeeldingen, en het verbeteren van de leesbaarheid van je tekst. Zo zorg je ervoor dat niemand buiten de boot valt, wat niet alleen klantgericht is, maar ook goed voor je merk is.<\/p>\n<p>Dus, waar wacht je nog op? Maak vandaag nog je e-mails toegankelijk en geef iedereen de kans om jouw boodschap te lezen en erop te reageren. <strong>Succes met versturen!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Toegankelijkheid gaat niet alleen over designkeuzes; het gaat over inclusie. Door de WCAG te volgen, worden e-mails toegankelijk voor iedereen.<\/p>\n","protected":false},"author":59,"featured_media":174789,"template":"","cat_industry":[949,950,2034],"cat_topic":[1693,1000],"class_list":["post-175056","blog","type-blog","status-publish","has-post-thumbnail","hentry","cat_industry-b2b-nl-nl","cat_industry-b2c-nl-nl","cat_industry-government-nl-nl","cat_topic-sustainability-nl-nl","cat_topic-email-marketing-nl-nl"],"acf":[],"_links":{"self":[{"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/blog\/175056","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/users\/59"}],"version-history":[{"count":5,"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/blog\/175056\/revisions"}],"predecessor-version":[{"id":177159,"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/blog\/175056\/revisions\/177159"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/media\/174789"}],"wp:attachment":[{"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/media?parent=175056"}],"wp:term":[{"taxonomy":"cat_industry","embeddable":true,"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/cat_industry?post=175056"},{"taxonomy":"cat_topic","embeddable":true,"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/cat_topic?post=175056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}