Toegankelijkheid (WCAG): maak je website bruikbaar voor iedereen Web Accessibility (WCAG): Make Your Website Usable for Everyone
In dit artikel
Digitale toegankelijkheid betekent dat je website bruikbaar is voor alle bezoekers, inclusief mensen met een visuele, auditieve, motorische of cognitieve beperking. In Nederland heeft 1 op de 4 mensen een vorm van beperking. Als je website niet toegankelijk is, sluit je een kwart van je potentiële klanten uit.
Maar toegankelijkheid gaat verder dan beperkingen. Een goed toegankelijke website is ook beter voor bezoekers met een trage internetverbinding, mensen die hun telefoon in de zon gebruiken, ouderen en iedereen die ooit met één hand navigeert.
Wat is digitale toegankelijkheid?
Digitale toegankelijkheid gaat over vier principes (POUR):
Waarneembaar (Perceivable) — Informatie moet op meerdere manieren waarneembaar zijn. Afbeeldingen hebben alt-teksten, video’s hebben ondertitels.
Bedienbaar (Operable) — De website moet volledig te bedienen zijn met toetsenbord, spraak en andere hulpmiddelen. Niet alleen met een muis.
Begrijpelijk (Understandable) — Tekst moet leesbaar zijn, navigatie moet consistent zijn, foutmeldingen moeten duidelijk zijn.
Robuust (Robust) — De website moet werken met verschillende browsers, apparaten en hulptechnologieën (screenreaders, vergroting).
WCAG 2.2 uitgelegd
De Web Content Accessibility Guidelines (WCAG) zijn de internationale standaard voor digitale toegankelijkheid. Versie 2.2 (2023) is de huidige standaard.
| Niveau | Eis | Wie moet hieraan voldoen? |
|---|---|---|
| A | Minimale toegankelijkheid | Iedereen (absoluut minimum) |
| AA | Goede toegankelijkheid | Overheid, onderwijs, grote bedrijven (wettelijk vereist) |
| AAA | Optimale toegankelijkheid | Specialistische sites (zelden volledig haalbaar) |
Voor de meeste websites is niveau AA het streven. Dat is ook wat de European Accessibility Act vereist.
European Accessibility Act
Vanaf 28 juni 2025 is de European Accessibility Act (EAA) van kracht. Deze EU-richtlijn verplicht dat digitale diensten en producten toegankelijk zijn. Dit raakt:
Webshops en e-commerce platforms. Online bankieren en financiële diensten. Vervoersdiensten. Elektronische communicatie. Overheidswebsites (die al langer verplicht zijn via EN 301 549).
Ook als je bedrijf niet direct onder de wet valt, is het verstandig om aan WCAG AA te voldoen. Het vermijdt juridische risico’s, verbetert je SEO en vergroot je bereik.
10 quick wins voor betere toegankelijkheid
1. Alt-teksten op alle afbeeldingen
Beschrijf wat er op de afbeelding te zien is. Niet “afbeelding1.jpg” maar “Teamfoto van drie medewerkers op kantoor.” Decoratieve afbeeldingen krijgen een leeg alt-attribuut (alt="").
2. Voldoende kleurcontrast
Tekst moet een contrastverhouding hebben van minimaal 4,5:1 ten opzichte van de achtergrond (voor normale tekst). Gebruik een tool als WebAIM Contrast Checker om dit te meten.
3. Toetsenbordnavigatie
Test of je hele website te bedienen is met alleen Tab, Enter en pijltjestoetsen. Kun je overal bij komen? Is er een zichtbare focus-indicator? Zit je niet “vast” in een element?
4. Logische koppenstructuur
Gebruik H1 voor de paginatitel, H2 voor hoofdsecties, H3 voor subsecties. Sla geen niveaus over (geen H1 gevolgd door H3). Screenreaders gebruiken koppen om door je pagina te navigeren.
5. Formulierlabels
Elk invoerveld moet een zichtbaar label hebben dat programmatisch gekoppeld is (via het for-attribuut). Gebruik nooit alleen placeholder-tekst als label — die verdwijnt zodra je begint te typen.
6. Beschrijvende linkteksten
Niet “klik hier” of “lees meer” maar “Lees ons privacybeleid” of “Bekijk alle WordPress-diensten.” Screenreaders kunnen een lijst van alle links op een pagina tonen — “klik hier” zegt dan niets.
7. Ondertiteling bij video
Voeg altijd ondertitels toe aan video’s. Dit helpt niet alleen dove en slechthorende bezoekers, maar ook mensen in een drukke omgeving of die de taal aan het leren zijn.
8. Taalinstelling in HTML
Stel het lang-attribuut in op je HTML-element. Dit helpt screenreaders de juiste uitspraak te gebruiken. Voor een Nederlandse site: <html lang="nl">.
9. Focus-stijlen behouden
Verwijder nooit de standaard focus-outline via CSS (outline: none). Die outline helpt toetsenbordgebruikers te zien waar ze zijn. Vervang hem desnoods door een betere, zichtbare variant.
10. Leesbare lettergrootte
Gebruik minimaal 16px als basisgrootte voor bodytekst. Zorg dat tekst vergroot kan worden tot 200% zonder dat content afgekapt wordt of functionaliteit verloren gaat.
Testen met gratis tools
| Tool | Wat het test | Gratis? |
|---|---|---|
| WAVE | Automatische scan op A/AA-problemen | Ja |
| axe DevTools | Chrome-extensie, technische analyse | Ja (basis) |
| Lighthouse (Chrome) | Toegankelijkheidsscore (0-100) | Ja |
| WebAIM Contrast Checker | Kleurcontrast controleren | Ja |
| Handmatig testen | Toetsenbordnavigatie, screenreader | Ja |
Belangrijk
Automatische tools vinden slechts 30-40% van alle toegankelijkheidsproblemen. De rest vereist handmatig testen. Probeer je website eens te bedienen met alleen je toetsenbord — dat is de snelste manier om problemen te ontdekken.
Toegankelijkheid en SEO: onverwachte overlap
Veel toegankelijkheidsverbeteringen helpen ook je SEO:
Alt-teksten helpen Google afbeeldingen te begrijpen en te indexeren.
Koppenstructuur helpt Google de structuur van je pagina te begrijpen.
Beschrijvende links geven Google context over gelinkte pagina’s.
Snelle laadtijden zijn goed voor toegankelijkheid én een rankingfactor.
Mobiele optimalisatie is essentieel voor zowel toegankelijkheid als SEO.
Investeren in toegankelijkheid levert je dus dubbel op: een groter publiek én betere vindbaarheid.
Veelgestelde vragen
Moet mijn website voldoen aan de European Accessibility Act?
De EAA geldt voor bedrijven die digitale producten of diensten leveren aan consumenten in de EU, met uitzondering van micro-ondernemingen (minder dan 10 medewerkers én minder dan €2 miljoen omzet). Maar ook als je er niet onder valt: toegankelijkheid is goed voor je business.
Kost toegankelijkheid veel extra tijd en geld?
Als je het vanaf het begin meeneemt: nauwelijks. Achteraf aanpassen is duurder, maar de 10 quick wins hierboven kosten je een middag en leveren al een enorme verbetering.
Kan ik een overlay-plugin gebruiken voor toegankelijkheid?
Nee. Overlay-plugins (die een widget op je site plaatsen) lossen de onderliggende problemen niet op en veroorzaken vaak nieuwe problemen voor hulptechnologieën. Ze geven een vals gevoel van compliance. Fix de code zelf.
Hoe meet ik of mijn website toegankelijk genoeg is?
Begin met een automatische scan (WAVE of Lighthouse), los de gevonden problemen op, en test daarna handmatig met je toetsenbord. Voor een volledige beoordeling kun je een professionele audit laten doen.
In this article
Digital accessibility means your website is usable by all visitors, including people with visual, auditory, motor or cognitive disabilities. In the Netherlands, 1 in 4 people has some form of disability. If your website isn't accessible, you're excluding a quarter of your potential customers.
But accessibility goes beyond disabilities. A well-accessible website is also better for visitors with slow internet, people using their phone in the sun, elderly users and anyone who navigates with one hand.
What is digital accessibility?
Digital accessibility is built on four principles (POUR):
Perceivable — Information must be presentable in multiple ways. Images have alt text, videos have subtitles.
Operable — The website must be fully operable with keyboard, voice and other assistive tools. Not just with a mouse.
Understandable — Text must be readable, navigation must be consistent, error messages must be clear.
Robust — The website must work with different browsers, devices and assistive technologies (screen readers, magnification).
WCAG 2.2 explained
The Web Content Accessibility Guidelines (WCAG) are the international standard for digital accessibility. Version 2.2 (2023) is the current standard.
| Level | Requirement | Who needs to comply? |
|---|---|---|
| A | Minimal accessibility | Everyone (absolute minimum) |
| AA | Good accessibility | Government, education, large companies (legally required) |
| AAA | Optimal accessibility | Specialized sites (rarely fully achievable) |
For most websites, level AA is the goal. That's also what the European Accessibility Act requires.
European Accessibility Act
From June 28, 2025, the European Accessibility Act (EAA) is in effect. This EU directive requires digital services and products to be accessible. This affects:
Web shops and e-commerce platforms. Online banking and financial services. Transport services. Electronic communication. Government websites (which have been required for longer via EN 301 549).
Even if your business doesn't fall directly under the law, it's wise to comply with WCAG AA. It avoids legal risks, improves your SEO and expands your reach.
10 quick wins for better accessibility
1. Alt text on all images
Describe what's visible in the image. Not "image1.jpg" but "Team photo of three employees at the office." Decorative images get an empty alt attribute (alt="").
2. Sufficient color contrast
Text must have a contrast ratio of at least 4.5:1 against the background (for normal text). Use a tool like WebAIM Contrast Checker to measure this.
3. Keyboard navigation
Test if your entire website is operable using only Tab, Enter and arrow keys. Can you reach everything? Is there a visible focus indicator? Do you get "trapped" in any element?
4. Logical heading structure
Use H1 for the page title, H2 for main sections, H3 for subsections. Don't skip levels (no H1 followed by H3). Screen readers use headings to navigate through your page.
5. Form labels
Every input field must have a visible label that is programmatically linked (via the for attribute). Never use only placeholder text as a label — it disappears as soon as you start typing.
6. Descriptive link texts
Not "click here" or "read more" but "Read our privacy policy" or "View all WordPress services." Screen readers can show a list of all links on a page — "click here" says nothing then.
7. Video captions
Always add captions to videos. This helps not only deaf and hard-of-hearing visitors, but also people in noisy environments or learning the language.
8. Language setting in HTML
Set the lang attribute on your HTML element. This helps screen readers use the correct pronunciation. For a Dutch site: <html lang="nl">.
9. Keep focus styles
Never remove the default focus outline via CSS (outline: none). That outline helps keyboard users see where they are. Replace it with a better, visible variant if needed.
10. Readable font size
Use at least 16px as the base size for body text. Ensure text can be enlarged to 200% without content being cut off or functionality being lost.
Testing with free tools
| Tool | What it tests | Free? |
|---|---|---|
| WAVE | Automatic scan for A/AA issues | Yes |
| axe DevTools | Chrome extension, technical analysis | Yes (basic) |
| Lighthouse (Chrome) | Accessibility score (0-100) | Yes |
| WebAIM Contrast Checker | Color contrast verification | Yes |
| Manual testing | Keyboard navigation, screen reader | Yes |
Important
Automated tools only find 30-40% of all accessibility issues. The rest requires manual testing. Try operating your website using only your keyboard — that's the quickest way to discover problems.
Accessibility and SEO: unexpected overlap
Many accessibility improvements also help your SEO:
Alt text helps Google understand and index images.
Heading structure helps Google understand your page structure.
Descriptive links give Google context about linked pages.
Fast load times are good for accessibility and a ranking factor.
Mobile optimization is essential for both accessibility and SEO.
Investing in accessibility pays off double: a larger audience and better search visibility.
Frequently asked questions
Does my website need to comply with the European Accessibility Act?
The EAA applies to businesses that deliver digital products or services to consumers in the EU, except micro-enterprises (fewer than 10 employees and less than €2 million turnover). But even if you don't fall under it: accessibility is good for business.
Does accessibility cost a lot of extra time and money?
If you include it from the start: barely. Retrofitting is more expensive, but the 10 quick wins above cost you an afternoon and already deliver a huge improvement.
Can I use an overlay plugin for accessibility?
No. Overlay plugins (that place a widget on your site) don't fix the underlying issues and often cause new problems for assistive technologies. They give a false sense of compliance. Fix the code itself.
How do I measure if my website is accessible enough?
Start with an automated scan (WAVE or Lighthouse), fix the issues found, then test manually with your keyboard. For a complete assessment, you can have a professional audit done.