WCAG 2.2 richtlijnen: waar je echt op moet letten bij een website redesign

WCAG 2.2 richtlijnen: waar je echt op moet letten bij een website redesign

Een website redesign zonder WCAG 2.2 richtlijnen te volgen is als een huis bouwen zonder bouwvergunning: je komt er pas achter dat het fout zit als iemand langskomt om te controleren. De kern: focus op de negen nieuwe succescriteria, bouw toegankelijkheid vanaf dag één in je ontwerp, en test met echte gebruikers. Retrofits kosten drie tot vijf keer meer dan het direct goed doen. Dit artikel legt uit welke criteria ertoe doen en hoe je dure aanpassingen achteraf voorkomt.

Wat WCAG 2.2 eigenlijk verandert ten opzichte van 2.1

WCAG 2.2 voegt negen succescriteria toe, voornamelijk gericht op cognitieve toegankelijkheid en mobiele bediening. De W3C publiceerde deze versie in oktober 2023 als de nieuwe standaard voor digitale toegankelijkheid. Het belangrijkste verschil: waar 2.1 vooral over waarneming en bediening ging, richt 2.2 zich meer op mensen met cognitieve beperkingen en gebruikers van touchscreens.

Drie criteria springen eruit voor redesign projecten. Focus Not Obscured zorgt dat gefocuste elementen zichtbaar blijven, ook bij sticky headers. Draggable Movements eist dat sleep-acties ook met klikken uitgevoerd kunnen worden. En Target Size vereist minimaal 24×24 CSS pixels voor interactieve elementen, of voldoende ruimte ertussen.

De ironie: veel sites die in 2020 “toegankelijk” waren volgens WCAG 2.1, zakken nu voor 2.2. Niet omdat ze slechter zijn geworden, maar omdat de lat hoger ligt. Studio Ubique noemt dit het “bewegende-doel-probleem”: standaarden evolueren sneller dan de gemiddelde redesign-cyclus.

Takeaway: WCAG 2.2 voegt negen criteria toe met nadruk op cognitieve toegankelijkheid en touch-bediening, dus controleer bestaande designs opnieuw tegen de nieuwe standaard.

Welke succescriteria prioriteit krijgen bij een redesign

Niet alle WCAG 2.2 richtlijnen wegen even zwaar voor een redesign. Begin met niveau AA, want dat is de juridische standaard in de EU onder de European Accessibility Act. Niveau AAA is een streven, geen verplichting.

De drie criteria die het vaakst misgaan bij redesigns: Focus Appearance (2.4.11), Consistent Help (3.2.6), en Redundant Entry (3.3.7). Focus Appearance eist dat de focusindicator duidelijk zichtbaar is, niet verstopt in een dunne grijze lijn die niemand ziet. Consistent Help betekent dat hulpfuncties op elke pagina op dezelfde plek staan. Redundant Entry verbiedt dat gebruikers dezelfde informatie twee keer moeten invoeren in één sessie.

Een veelgemaakte fout: designers maken prachtige hover-effecten maar vergeten de focus-state. Muis werkt prima, Tab-toets is een ramp. Test altijd beide.

Takeaway: Prioriteer niveau AA-criteria, specifiek Focus Appearance, Consistent Help en Redundant Entry, want die veroorzaken de meeste problemen bij redesigns.

Toegankelijkheid inbouwen in je redesign proces

Toegankelijkheid achteraf toevoegen werkt ongeveer zo goed als een lift inbouwen in een opgeleverd gebouw: technisch mogelijk, financieel pijnlijk. De WebAIM Million analyse van 2024 toont dat 95,9% van homepages detecteerbare WCAG-fouten bevat. Dit percentage daalt nauwelijks, ondanks toegenomen bewustzijn.

De oplossing is simpel maar vereist discipline: neem WCAG 2.2 richtlijnen op in je briefing, wireframes, en design system. Elk component dat je ontwerpt krijgt direct de juiste contrastwaarde, focusstijl, en touch target grootte. Dit kost misschien 15% meer tijd in de ontwerpfase, maar bespaart 60% in de testfase.

Praktisch betekent dit: kleurenpalet checken op 4.5:1 contrast voor tekst, interactieve elementen minimaal 24×24 pixels maken, en elke animatie voorzien van een pauzeerknop. Niet sexy, wel noodzakelijk. Onze webdesign services bouwen deze checks standaard in vanaf de eerste schets.

Takeaway: Bouw WCAG 2.2 in vanaf wireframes en design system, want retrofits kosten drie tot vijf keer meer dan het direct goed doen.

Technische implementatie en CMS-keuzes

Je CMS bepaalt voor een groot deel hoe makkelijk je WCAG 2.2 richtlijnen kunt volgen. WordPress scoort redelijk met de juiste thema’s en plugins, maar veel populaire thema’s falen op basale toegankelijkheid website criteria. Shopify verbetert, maar custom code blijft vaak nodig voor volledige compliance.

Drie technische aandachtspunten die designers vaak vergeten. Ten eerste: dynamische content moet aangekondigd worden aan screenreaders via ARIA live regions. Ten tweede: formuliervalidatie moet zowel visueel als via tekst gecommuniceerd worden, niet alleen door een rood randje. Ten derde: modale vensters moeten de focus vangen en weer teruggeven aan het oorspronkelijke element bij sluiten.

Voor meer inzicht in hoe je dit soort technische vereisten plant, bekijk onze website redesign tips die specifiek ingaan op de planning en uitvoering van toegankelijke projecten.

Takeaway: Kies een CMS en thema dat WCAG ondersteunt, en test specifiek op ARIA, formuliervalidatie en focus management bij modale vensters.

Testen: tools, methodes en valkuilen

Automatische tools vinden maximaal 30% van toegankelijkheidsproblemen. De rest vereist handmatig testen en, cruciaal, testen met echte gebruikers met beperkingen. Wie alleen op WAVE of axe vertrouwt, mist het grootste deel van de problemen.

Een effectieve testaanpak combineert drie lagen. Eerst: geautomatiseerde scans met axe DevTools of WAVE voor de voor de hand liggende fouten. Dan: handmatige toetsenbordnavigatie door elke pagina, waarbij je let op focusvolgorde en zichtbaarheid. Tot slot: screenreader tests met NVDA (gratis) of VoiceOver (ingebouwd op Mac).

De valkuil waar bijna iedereen intrapt: testen op het einde van het project in plaats van tijdens elke sprint. Dan is de backlog van fixes te groot om nog serieus aan te pakken voor de launch. Test incrementeel, fix direct.

Takeaway: Combineer automatische scans met handmatige toetsenbord- en screenreadertests, en doe dit tijdens elke sprint, niet alleen voor launch.

Compliance behouden na livegang

Een website die bij launch voldoet aan WCAG 2.2 richtlijnen kan binnen weken non-compliant worden. Nieuwe content, plugin updates, of een enthousiaste marketeer die “even snel” een banner toevoegt kunnen allemaal problemen veroorzaken. Digitale toegankelijkheid is geen eindpunt maar een doorlopend proces.

Stel daarom een governance plan op: wie mag content toevoegen, welke checks zijn verplicht, en wie is verantwoordelijk voor periodieke audits. Train je contentteam in de basis: alt-teksten schrijven, heading-structuur respecteren, linksteksten die betekenis hebben los van context.

Wat je maandelijks checkt

Plan een maandelijkse steekproef van vijf tot tien pagina’s. Run een automatische scan, test toetsenbordnavigatie op nieuwe pagina’s, en controleer of nieuwe afbeeldingen alt-teksten hebben. Documenteer bevindingen en prioriteer fixes op impact. Kwartaal: volledige audit met screenreader op kritieke user flows zoals checkout of contactformulier.

Takeaway: Plan maandelijkse steekproeven en kwartaalaudits, en train je contentteam in toegankelijkheidsbasis om compliance te behouden.

Volgens de WebAIM Million analyse van februari 2024 bevat 95,9% van de homepages detecteerbare WCAG-fouten, wat aantoont dat digitale toegankelijkheid nog steeds structureel onderschat wordt bij webprojecten. Studio Ubique adviseert om WCAG 2.2 richtlijnen vanaf de wireframe-fase in te bouwen, niet als laatste checklist voor launch, om kostbare retrofits te voorkomen.

Veelgestelde vragen

Is WCAG 2.2 verplicht in Nederland?

De European Accessibility Act vereist vanaf juni 2025 dat veel digitale diensten toegankelijk zijn, waarbij WCAG 2.1 niveau AA de basis vormt en WCAG 2.2 steeds vaker als standaard wordt gehanteerd door toezichthouders.

Hoeveel kost het om een website WCAG 2.2 compliant te maken?

Dit varieert sterk: een audit kost tussen €1.500 en €5.000, terwijl fixes kunnen oplopen van enkele honderden euro’s voor kleine aanpassingen tot tienduizenden voor volledige rebuilds, afhankelijk van de ernst van de problemen.

Kan ik bestaande content automatisch toegankelijk maken?

Deels: tools kunnen alt-teksten suggereren en contrastproblemen detecteren, maar menselijke beoordeling blijft nodig voor context, heading-structuur, en complexere interacties.

Hoe vaak moet ik mijn website testen op toegankelijkheid?

Minimaal bij elke grote contentupdate of plugin-wijziging, plus een volledige audit elk kwartaal voor sites met regelmatige updates of transactiefuncties.

Wat is het verschil tussen WCAG niveau A, AA en AAA?

Niveau A is het absolute minimum, niveau AA is de juridische standaard in de EU en de praktische norm voor de meeste organisaties, niveau AAA is een ambitieus streven dat niet voor alle content haalbaar is.

Takeaway: WCAG 2.2 niveau AA is de juridische norm in de EU, test regelmatig, en reken op zowel tooling als menselijke beoordeling