WCAG 2.2: maak je website en webshop vandaag nog toegankelijk

WCAG 2.2 is de actuele standaard voor webtoegankelijkheid en raakt iedereen die een website, webapp of webshop bouwt of beheert: designers, developers en redacties. Toegankelijkheid vergroot je bereik, verbetert SEO en voldoet aan wet- en regelgeving — en het voorkomt usability-fouten die conversie en klanttevredenheid schaden.

Dit artikel is praktisch en actiegericht: direct toepasbare checklists, concrete codevoorbeelden (HTML/ARIA/CSS), en teststappen zodat je meteen kunt beginnen. Gebruik onze WCAG checker, download onze plugin of neem contact op met onze medewerkers — we beantwoorden het contactformulier altijd binnen 24 uur.

Wat betekent dit?

WCAG 2.2 bouwt voort op WCAG 2.1 en introduceert nieuwe succescriteria gericht op real‑world problemen zoals focus, interacties en zichtbaarheid. De regels zijn ingedeeld op vier principes: Perceivable, Operable, Understandable en Robust (POUR). Voor je team betekent dit concrete aanpassingen aan designpatronen, frontendcode en redactionele workflows.

Belangrijke wijzigingen in WCAG 2.2

Nieuwe focusindicator-eisen: zichtbare, meetbare focus voor toetsenbordgebruikers.
Target size: interactieve elementen moeten tappable/clickable genoeg zijn op mobiele apparaten.
Consistentie en voorspelbaarheid bij UI-componenten en invoer.

Waarom dit belangrijk is

Toegankelijkheid is geen extra taak; het is onderdeel van kwaliteitswerk. Directe voordelen: beter bereik, hogere conversie, minder supportvragen, en voorkoming van juridische risico’s. Zoekmachines waarderen goede toegankelijkheid (semantische HTML, alt-teksten, goede headings), wat direct bijdraagt aan SEO.

Zakelijke impact

Verhoogde conversie: gebruikers met beperkingen kunnen aankopen afronden.
Lagere kosten: minder klantenservice en minder reparatiewerk door structurele toegankelijkheid.
Reputatie: actieve naleving van WCAG toont maatschappelijke verantwoordelijkheid.

Direct toepassen

Hier practicals voor designers, developers en redacties. Gebruik deze mini-checklists en code-snippets als baseline in je sprintplanning.

Designers: checklist en voorbeelden

Zorg voor voldoende kleurcontrast (minimaal 4.5:1 voor normale tekst, 3:1 voor grote tekst).
Voorzie duidelijke focus-states in het ontwerp (niet alleen kleurveranderingen).
Lever componenten met states, labels en foutmeldingen in spec (hover, focus, active, invalid).

/* Focus zichtbaar en duidelijk: */
.button:focus, a:focus { outline: 3px solid #005fcc; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(0,95,204,0.2); }

Developers: HTML/ARIA/CSS-snippets

Gebruik semantische HTML en voeg ARIA alleen toe als het nodig is. Hieronder enkele praktische snippets.

/* Voor een toegankelijke knop die ook keyboard-friendly is */


/* Voor form controls, labels en foutmelding */
E-mail

Voer een geldig e‑mailadres in.

Redacties: tekst, structuur en media

Alt-teksten: kort en functioneel, geen “afbeelding van …”.
Kopstructuur: één H1 per pagina, logische volgorde (H2, H3).
Multimedia: ondertitels of transcript bij video, beschrijvende audio waar nodig.

Hoe test je dat?

Combineer geautomatiseerde checks met handmatige toetsen. Onze WCAG checker / validator geeft een eerste scan, maar handmatige tests zijn cruciaal voor keyboardnavigatie, screenreadergebruik en mobiele interacties.

Stap-voor-stap testplan

Draai een automatische scan met onze WCAG checker en noteer hoge-prioriteit issues.
Voer keyboard-only navigatie uit: alle interactieve elementen moeten bereikbaar en zichtbaar zijn met Tab/Shift+Tab. Test acties met Enter/Space.
Screenreadercheck: lees pagina met NVDA (Windows) of VoiceOver (macOS) en controleer of labels en berichtgeving logisch zijn.
Contrastcheck: gebruik onze tool of meet handmatig met een contrastmeter — rapporteer alle lagen: tekst, UI, iconen.
Mobiele test: controleer target sizes en zoomgedrag (200% zoom moet werken zonder content te verliezen).
Formulieren: valideringsfouten moeten duidelijk gemarkeerd zijn en in natuurlijke leesvolgorde met aria-live updates.

Concrete teststappen (keyboard)

Start op pagina en druk Tab tot je bij elk interactief element bent geweest.
Controleer dat iedere focus zichtbaar is en dat functionaliteit beschikbaar is via Enter/Space.
Controleer modals en traps: focus moet binnen een modal blijven en terugkeren bij sluiten.

Wanneer is dit extra belangrijk?

Sommige pagina’s of functies hebben hogere urgentie voor toegankelijkheid: checkoutprocessen, zorg‑ en overheidsinformatie, inschrijfformulieren en documenten met veel verkeer. Prioriteer deze flows in je backlog en voer regressietests uit bij elke release.

Prioriteitsmatrix

Hoog: checkout, accountbeheer, formulieren voor dienstverlening.
Midden: productpagina’s, contentpagina’s met veel verkeer.
Laag: achtergrondpagina’s, maar test ook hier basale toegankelijkheid.

Regelmatige checks en workflow

Integreer onze plugin in CI/CD zodat elke build een basis-scan krijgt.
Plan maandelijkse handmatige reviews voor kritieke flows.
Train redacties op alt-tekst, kopstructuur en linkschrijfregels.

Gebruik onze WCAG plugin voor automatische checks in je ontwikkelingstraject en exporteer rapporten voor je backlog. Neem bij vragen direct contact op — we reageren op contactformulieren binnen 24 uur.

Praktische checklist (snel)

Gebruik semantische HTML: nav, main, header, footer, article.
Labels: elk form-element heeft een zichtbaar label of aria-label.
Focus: duidelijke, contrasterende focus indicatoren.
Contrast: min. 4.5:1 voor bodytekst.
Interactie: target size 44×44 CSS pixels of alternatieve mechanismen.
Media: ondertiteling of transcript bij video.
Automatisering: draai onze WCAG checker bij elke release en installeer de plugin.

Wil je dit snel invoeren? Start met een scan via wcagtool.nl, download onze plugin en plan een korte review met één van onze experts — binnen 24 uur antwoord op je contactformulier. Als laatste praktische tip: begin met je kritieke conversiefunnels (checkout, formulieren) — maak die 100% toegankelijk en rol daarna gefaseerd de rest uit.