Website-toegankelijkheid: een praktische WCAG 2.2-gids
Hoe je WCAG 2.2 leest voor je eigen site, de fixes die de meeste echte fouten dekken, een handmatige test van 30 minuten die iedereen kan doen en hoe toegankelijkheid en gebruiksvriendelijkheid overlappen.
Veelgestelde vragen
Wat betekent het als een website WCAG-conform is?
Het betekent dat de site voldoet aan de succescriteria van de Web Content Accessibility Guidelines op een gekozen niveau, meestal WCAG 2.1 of 2.2 niveau AA. Niveau AA omvat alle criteria van niveau A en AA. De meeste wetten en aanbestedingsregels die naar WCAG verwijzen, vragen om niveau AA.
Hoe interpreteer ik de WCAG-richtlijnen voor mijn site?
Begin met de snelle referentie 'How to Meet WCAG' van het W3C, filter op niveau A en AA en lees bij elk criterium de 'Understanding'-pagina, die de bedoeling in gewone taal uitlegt. Test daarna je belangrijkste sjablonen (home, een contentpagina, een formulier, afrekenen) in plaats van elke pagina afzonderlijk.
Kan een toegankelijkheidsoverlay of plug-in mijn site conform maken?
Geen enkel hulpmiddel kan een site op eigen kracht conform maken. Overlays die een werkbalk toevoegen, herstellen de onderliggende code niet, en veel gebruikers met een beperking en toegankelijkheidsspecialisten melden dat ze in de weg zitten. Herstel de HTML, het contrast, de labels en de toetsenbordondersteuning rechtstreeks.
Wat is het verschil tussen gebruiksvriendelijkheid en toegankelijkheid?
Toegankelijkheid betekent dat mensen met een beperking de site kunnen waarnemen, begrijpen, doorlopen en gebruiken. Gebruiksvriendelijkheid betekent dat de site voor iedereen gemakkelijk en efficiënt is. Ze overlappen sterk: duidelijke labels, goed contrast en voorspelbare navigatie helpen alle bezoekers, niet alleen mensen met een beperking.
Vinden geautomatiseerde checkers alle toegankelijkheidsproblemen?
Nee. Tools als WAVE, axe en Lighthouse vangen problemen op zoals ontbrekende alt-teksten, laag contrast en ontbrekende labels, maar veel criteria, zoals of een alt-tekst zinvol is of de focusvolgorde logisch is, moet een mens controleren.
Een WCAG-conforme website voldoet aan de Web Content Accessibility Guidelines op een gekozen niveau, en voor vrijwel elk bedrijf betekent dat WCAG 2.2 niveau AA. In de praktijk falen de meeste sites op dezelfde handvol punten: laag kleurcontrast, ontbrekende alt-tekst bij afbeeldingen, formuliervelden zonder label, lege links en knoppen, en dingen die je niet met een toetsenbord kunt bereiken. Los die op, test met een toetsenbord en een schermlezer, en je hebt een groot deel gedekt van waar echte gebruikers tegenaan lopen.
Deze gids legt uit hoe je WCAG leest zonder te verdwalen, welke fixes het meest tellen en een test van 30 minuten die je zelf kunt doen.
Hoe WCAG is opgebouwd
WCAG wordt gepubliceerd door het W3C. Het is in lagen georganiseerd:
Vier principes, bekend als POUR: content moet Perceivable (waarneembaar), Operable (bedienbaar), Understandable (begrijpelijk) en Robust (robuust) zijn.
Richtlijnen onder elk principe (bijvoorbeeld "Tekstalternatieven" of "Toetsenbordtoegankelijk").
Succescriteria onder elke richtlijn. Dit zijn de toetsbare regels, elk genummerd (zoals 1.4.3 Contrast) en voorzien van een niveau: A, AA of AAA.
Niveau A is het minimum. Niveau AA is het gebruikelijke doel voor wettelijke en aanbestedingseisen. Niveau AAA is strenger en meestal niet vereist voor hele sites.
WCAG 2.2 werd in oktober 2023 een W3C Recommendation. Het voegde criteria toe zoals minimale aanraakdoelgrootte, focus die niet verborgen mag zijn en toegankelijke authenticatie, en het schrapte 4.1.1 Parsing als achterhaald.
Hoe je WCAG interpreteert voor je eigen site
De specificatie leest als een norm, want dat is het ook. Een praktische route:
Open de "How to Meet WCAG (Quick Reference)" van het W3C.
Filter op alleen niveau A en AA.
Lees bij elk criterium de gelinkte "Understanding"-pagina. Die legt de bedoeling in gewone taal uit, met voorbeelden van wat slaagt en wat faalt.
Test niet elke pagina, maar je sjablonen: de homepage, een standaard contentpagina, een blogbericht, een formulier, een product- of afrekenpagina. Een sjabloon herstellen herstelt elke pagina die erop is gebouwd.
Noteer elk probleem met het criteriumnummer, de pagina en hoe een oplossing eruitziet.
De fixes die de meeste echte fouten dekken
1. Kleurcontrast (1.4.3 en 1.4.11)
Gewone tekst: minimaal 4.5:1 tegen de achtergrond.
Grote tekst (ongeveer 24px normaal, of 18.66px vet en groter): minimaal 3:1.
Interface-onderdelen en betekenisvolle afbeeldingen (knoprandjes, invoerkaders, iconen die informatie overbrengen): minimaal 3:1.
Lichtgrijze placeholdertekst en witte tekst op lichte merkkleuren zijn de gebruikelijke boosdoeners. Controleer met de contrastchecker van WebAIM of de dev tools van je browser.
2. Tekstalternatieven voor afbeeldingen (1.1.1)
Informatieve afbeeldingen krijgen alt-tekst die beschrijft wat ertoe doet: alt="Technician replacing a furnace filter".
Decoratieve afbeeldingen krijgen een lege alt: alt="", zodat schermlezers ze overslaan.
Afbeeldingen van tekst (een screenshot van een flyer, een menu als JPG) hebben dezelfde tekst nodig als echte tekst.
Afbeeldingen met een link, zoals een logo dat naar home gaat, beschrijven de bestemming: alt="Acme Plumbing home".
3. Formulierlabels en foutmeldingen (1.3.1, 3.3.1, 3.3.2)
Elk invoerveld heeft een zichtbaar <label> nodig dat eraan is gekoppeld. Placeholdertekst is geen label: die verdwijnt zodra je typt.
Foutmeldingen zeggen wat er misging en hoe je het oplost ("Voer een telefoonnummer in met netnummer"), in tekst, niet alleen met een rode rand.
Verplichte velden worden aangeduid met tekst of een toegankelijke indicator, niet alleen met kleur.
4. Toetsenbordtoegang (2.1.1, 2.4.3, 2.4.7)
Elke link, knop, elk menu en formulierelement moet werken met Tab, Shift+Tab, Enter en Spatie.
De focusvolgorde volgt de visuele volgorde.
Een zichtbare focusindicator laat zien waar je bent. De omlijning van de browser verwijderen met outline: none zonder vervanging is een veelvoorkomende fout.
Uitklapmenu's en modals moeten met het toetsenbord kunnen openen, werken en sluiten, en modals moeten de focus binnen houden tot ze gesloten zijn.
5. Links en knoppen met namen (2.4.4, 4.1.2)
Knoppen met alleen een icoon (een hamburgermenu, een zoekloep, sociale iconen) hebben een toegankelijke naam nodig, via zichtbare tekst, aria-label of verborgen tekst.
Vermijd een pagina vol "Klik hier" en "Lees meer". Laat de linktekst de bestemming beschrijven, of geef elke link een eigen toegankelijke naam.
6. Structuur en koppen (1.3.1, 2.4.6)
Eén <h1> per pagina die de pagina beschrijft.
Koppen in logische volgorde (h2 voor secties, h3 daarbinnen), niet gekozen op lettergrootte.
Gebruik echte lijsten, tabellen met kopcellen en landmarks (<header>, <nav>, <main>, <footer>).
Stel de paginataal in: <html lang="nl">.
7. Nieuw in WCAG 2.2, goed om te weten
2.5.8 Target Size (Minimum), AA: klikbare doelen van minimaal 24 bij 24 CSS-pixels, of genoeg ruimte rondom kleinere.
2.4.11 Focus Not Obscured (Minimum), AA: vaste headers, cookiebanners en chatwidgets mogen het gefocuste element niet volledig verbergen.
3.3.8 Accessible Authentication (Minimum), AA: vraag niet om puzzels op te lossen of informatie te onthouden om in te loggen zonder alternatief; sta wachtwoordmanagers en plakken toe.
3.3.7 Redundant Entry, A: laat mensen informatie die ze al hebben ingevuld in hetzelfde proces niet opnieuw typen.
8. Media en beweging
Video's hebben ondertitels nodig (1.2.2); opgenomen video heeft audiobeschrijving of een tekstalternatief nodig voor belangrijke visuele inhoud.
Alles wat langer dan vijf seconden automatisch beweegt, heeft een manier nodig om het te pauzeren (2.2.2).
Respecteer de instelling prefers-reduced-motion bij grote animaties.
Een handmatige test van 30 minuten
Geautomatiseerde tools vangen maar een deel van het geheel. Voeg deze routine toe voor elk belangrijk sjabloon.
Minuut 0 tot 5: geautomatiseerde scan. Draai WAVE (browserextensie) of axe DevTools, of het toegankelijkheidsonderdeel van Lighthouse. Herstel duidelijke fouten zoals ontbrekende alt, ontbrekende labels en contrastfouten.
Minuut 5 tot 15: alleen toetsenbord. Leg de muis weg. Tab vanaf de bovenkant door de pagina.
Zie je op elk moment waar de focus is?
Kun je het menu openen en sluiten, elk formulierveld gebruiken en verzenden?
Is er een link "Naar inhoud springen" en werkt die?
Verdwijnt de focus ooit achter een vaste header of banner?
Minuut 15 tot 25: schermlezer. Gebruik VoiceOver (ingebouwd in macOS en iOS) of NVDA (gratis op Windows).
Luister naar de lijst met koppen. Beschrijft die de pagina?
Tab naar afbeeldingen en knoppen. Zijn ze begrijpelijk buiten hun context?
Vul het formulier in. Wordt elk veld met zijn label voorgelezen? Worden foutmeldingen voorgelezen?
Minuut 25 tot 30: zoom en reflow. Zoom de browser naar 200% en daarna 400%. Bij 400% moet de inhoud in één kolom herschikken zonder horizontaal scrollen (1.4.10 Reflow), en er mag niets worden afgesneden.
Gebruiksvriendelijkheid en toegankelijkheid overlappen
Wie zoekt op "web usability accessibility" doet er goed aan ze te bundelen. Bijna elke toegankelijkheidsfix is ook een gebruiksvriendelijkheidsfix:
Toegankelijkheidsfix
Wie er nog meer baat bij heeft
Sterk contrast
Iedereen met een telefoon in de zon
Zichtbare labels
Iedereen die haastig een formulier invult
Ondertitels
Mensen die kijken met het geluid uit
Toetsenbordondersteuning
Power users, mensen met een kapot trackpad
Grotere tikdoelen
Iedereen op mobiel
Duidelijke foutmeldingen
Iedereen die zich vertypt
Overlays, verklaringen en de wet
Overlays: widgets die conformiteit in één regel beloven, veranderen je onderliggende code niet. Herstel de site zelf.
Toegankelijkheidsverklaring: publiceer een korte pagina met welke norm je nastreeft, bekende problemen en hoe mensen contact met je opnemen voor hulp of alternatieve formaten.
Juridische context: de eisen verschillen per land. De European Accessibility Act geldt vanaf juni 2025 voor veel producten en diensten in de EU; in de VS wordt de ADA regelmatig op websites toegepast; overheidsinstanties hebben vaak specifieke regels. Vraag juridisch advies voor jouw situatie.
Checklist
[ ] Contrast: 4.5:1 voor tekst, 3:1 voor grote tekst en UI-onderdelen
[ ] Alt-tekst bij informatieve afbeeldingen, lege alt bij decoratieve
[ ] Elk invoerveld heeft een zichtbaar, gekoppeld label
[ ] De hele site werkt met het toetsenbord met zichtbare focus
[ ] Iconknoppen hebben toegankelijke namen
[ ] Logische koppen en landmarks, paginataal ingesteld
[ ] Tikdoelen van minimaal 24 bij 24 CSS-pixels
[ ] Ondertitels bij video, pauzeknop bij beweging
[ ] Herschikt bij 400% zoom
[ ] Toegankelijkheidsverklaring gepubliceerd
Toegankelijkheid ondersteunt ook zoekmachines: koppen, alt-tekst en beschrijvende links horen ook bij de basis van on-page SEO, zoals behandeld in onze on-page SEO-checklist.
We.Inc genereert sites als standaard HTML, CSS en React-code die je direct kunt bewerken, dus je kunt labels, alt-tekst en contrast zelf verbeteren of de wijzigingen in de chat aanvragen. Voer de handmatige controles hierboven altijd uit op alles wat je publiceert.