De WCAG 2.2

Sinds 5 oktober 2023 is de WCAG 2.2 gepubliceerd. Deze bestaan uit 6 nieuwe succescriteria.

Joris geeft UX-designers training over digitale toegankelijkheid

Van WCAG 2.1 naar WCAG 2.2

We hebben lang de WCAG 2.1 gebruikt om digitale toegankelijkheid te toetsen. Hoe toegankelijker een website is, hoe beter je voldoet aan de succescriteria van de WCAG (Web Content Accessibility Guidelines). Maar het internet en ons gedrag online is constant in beweging. De WCAG ook. We hebben nu dan ook een aanvulling op de huidige WCAG, de WCAG 2.2.

Wat is de WCAG 2.2?

De WCAG 2.2 is een aanvulling op de WCAG 2.1. Aan WCAG 2.2 worden zes nieuwe succescriteria toegevoegd op niveau A en AA.

Deze zijn bedoeld om de toegankelijkheid voor gebruikers met een cognitieve beperking, leerstoornis of verminderd zicht te verbeteren. Een paar van deze nieuwe succescriteria zijn vooral bedoeld om de toegankelijkheid op tablet en telefoon te verbeteren.

Succescriterium 2.4.7 gaat van niveau AA naar niveau A. Het wordt daardoor belangrijker. Dit succescriterium zegt iets over hoe zichtbaar de focus is. Dit helpt bezoekers die afhankelijk zijn van het toetsenbord of vergelijkbare hulpapparatuur.

4 principes. 13 richtlijnen. 31 criteria level a. 24 criteria level aa. 31 criteria level aaa

De 6 nieuwe succescriteria op niveau A en AA

WCAG 2.2 is een update van de huidige set richtlijnen. Er komt dus niet een compleet nieuwe lijst, maar er worden een aantal succescriteria toegevoegd.

2.4.11 Focus niet bedekt (minimum) (AA)

De interactieve component waar de toetsenbordfocus op staat moet overal minimaal deels zichtbaar zijn en mag dus niet helemaal verborgen zijn.

2.5.7 Sleepbewegingen (AA)

Als je iets met een aanwijzer (bijvoorbeeld een muis) kunt slepen dan moet dat ook op een andere manier mogelijk zijn met een aanwijzer zonder te slepen.

2.5.8 Doelgebied grootte (minimaal) (AA)

Voorkom problemen door klikbare gebieden groot genoeg te maken.

3.2.6 Consistente hulp (A)

Als hulp beschikbaar is op de website dan is die altijd op dezelfde plek te vinden. 

3.3.7 Overbodige invoer (A)

Zorg dat informatie niet meerdere keren moet worden ingevoerd in hetzelfde proces. 

3.3.8 Toegankelijke authenticatie (minimum) AA

Gebruik geen cognitieve functietest voor het inloggen op een webpagina.

De 3 nieuwe richtlijnen op niveau AAA

De richtlijnen op niveau AAA zijn niet verplicht.

2.4.12 Focus niet verduisterd

Een component van de gebruikersinterface wordt op geen enkele manier bedekt door de content wanneer deze de toetsenbordfocus krijgt.

2.4.13 Focus weergave

Als de toetsenbordindicator te zien is voldoet een gebied van de focusindicator aan:

  1. Een minimale grootte van 2 CSS pixel dik, ten op zichte van het (sub)component wanneer deze niet gefocust is.

  2. Een contrastverhouding van 3:1 tussen dezelfde pixels wanneer deze gefocust en ongefocust is.

Uitzonderingen:

Er zijn twee uitzonderingen voor dit criterium waarin de focusweergave niet hoeft worden beoordeeld:

  1. De auteur kan de focusindicator niet aanpassen.

  2. Het succescriterium is niet van toepassing wanneer de focusindicator en de achtergrond van de focusindicator niet zijn aangepast door de auteur.

Alle succescriteria van de WCAG 2.2 lezen?

Wil je zelf aan de slag met de succescriteria van de WCAG 2.2 AA? Laat dan jouw naam en e-mailadres achter en download onze WCAG checklist. Dan kun je er gelijk mee aan de slag!

Naam is niet ingevuld
E-mailadres is niet ingevuld
Nieuwsbrief
Marijn van der Laan

Wetgeving en WCAG 2.2

De WCAG 2.2 AA is nog niet de huidige norm. Dat is de WCAG 2.1 AA. Wanneer deze wél de huidige norm is voor de Wet Digitale Overheid en bijvoorbeeld de European Accessibility Act laten wij je het gelijk weten.

De WCAG 2.2 voor...

Overheid

Voor veel overheden zijn de Web Content Accessibility Guidelines nog een uitdaging. De WCAG 2.2 AA is (nog) geen onderdeel in de hele organisatie.

Cardan voor overheid

Bedrijven

Het ziet er naar uit dat de WCAG 2.2 AA leidend gaat zijn voor de European Accessibility Act. Hoe bereid jij jouw bedrijf hier op voor? Wij helpen je bij de complete borging.

Cardan voor bedrijven

Leveranciers

Hoe laat jij jouw product voldoen aan alle succescriteria van de WCAG richtlijnen? Als ontwikkelaar is het belangrijk dat je weet hoe je deze moet toepassen in de praktijk.

Cardan voor leveranciers

4 tips voor WCAG 2.2

We helpen je graag met het toepassen van de WCAG 2.2. We zetten de meest belangrijkste nieuwe criteria op een rij en delen tips hoe je daar nu al mee aan de slag kan. Wel zo handig, vind je ook niet?

Tip 1: maak het navigeren op websites en apps makkelijker

Richtlijn 2.4

“Navigeerbaar” hoort bij het principe “Bedienbaar”. Het is belangrijk dat gebruikers:

  • Eenvoudig navigeren door je site of app,

  • Snel content kunnen vinden,

  • Weten waar ze zijn op de site.

Vooral dit laatste punt gaat nog niet altijd goed en daarom worden aan WCAG 2.2 in totaal drie succescriteria toegevoegd die bezoekers helpen te bepalen waar ze zijn op je website of app.

A) Zie waar je bent

De zogenaamde focusindicator helpt bezoekers die het toetsenbord gebruiken (in plaats van een muis) om te bepalen waar ze zijn op je website. We kijken nu al een beetje naar deze focusindicator, maar zelfs dan is deze niet altijd overal duidelijk.

Wij zijn dan ook erg blij dat WCAG 2.2 de toetsenbordfocus beter zichtbaar wordt, doordat er eisen worden gesteld aan de grootte en het contrast. Voor niveau AA moet de focusindicator een contrast hebben van ten minste 3,0:1. Voor niveau AAA (niet wettelijk verplicht) zelfs een contrast van ten minste 4,5:1. In totaal zijn er twee nieuwe succescriteria die iets zeggen over de focusindicator. Dat geeft ook wel het belang hiervan aan.

A) Zie waar je bent  De zogenaamde focusindicator helpt bezoekers die het toetsenbord gebruiken (in plaats van een muis) om te bepalen waar ze zijn op je website. We kijken nu al een beetje naar deze focusindicator, maar zelfs dan is deze niet altijd overal duidelijk.  Wij zijn dan ook erg blij dat WCAG 2.2 de toetsenbordfocus beter zichtbaar wordt, doordat er eisen worden gesteld aan de grootte en het contrast. Voor niveau AA moet de focusindicator een contrast hebben van ten minste 3,0:1. Voor niveau AAA (niet wettelijk verplicht) zelfs een contrast van ten minste 4,5:1. In totaal zijn er twee nieuwe succescriteria die iets zeggen over de focusindicator. Dat geeft ook wel het belang hiervan aan.

Tip 2: gebruik nieuwe invoervormen bij de WCAG 2.2

Alle invoervormen

Niet iedereen gebruikt een muis of toetsenbord. Alle vormen van invoer moeten mogelijk zijn met hulpmidddelen. Met stembediening is het bijvoorbeeld niet mogelijk om gebaren uit te voeren en niet alle gebruikers kunnen sleep-acties (zoals “drag and drop”) uitvoeren door een fysieke beperking.

A) Slepen op je website

Met je muis is het natuurlijk heel eenvoudig om iets te slepen op je website. Op een touch-device zoals een tablet of een telefoon is dit al wat lastiger. Wat als je helemaal geen normale muis gebruikt? Voor gebruikers met een motorische beperking is het slepen van bestanden niet altijd makkelijk. Denk hierbij aan:

  • bezoekers met vormen van Parkinson,

  • bezoekers die eye-tracking gebruiken om de computer te bedienen,

  • bezoekers die met de stem de computer besturen.

WCAG 2.2 moet er voor al deze gebruikers (naast het toetsenbord) ook een alternatieve manier zijn om deze acties uit te voeren met een “muis”. Dat kan bijvoorbeeld een knop zijn die je aan kunt klikken.

B) Makkelijker ‘links’ aanklikken

Sommige links, knoppen en andere interactieve elementen zijn zo ontzettend klein dat je ze op je mobiele telefoon of tablet nauwelijks kunt aanklikken. De kans dat je per ongeluk ergens anders op klikt of “misklikt” is erg groot. Veel mensen, vooral ouderen, hebben last van het “dikkevingersyndroom”.

screenshot van de website adidas.com

Tip 3: voorkom verwarring, wees voorspelbaar

Voorspelbaar is niet saai

Voorspelbaar zijn “klinkt” misschien saai, maar voor veel bezoekers op je website is dit erg belangrijk. En is alles logisch, dan zorg je ervoor dat gebruikers ook sneller vinden wat ze zoeken of sneller iets kopen in je webshop.

A) Bied een helpende hand

Sommige websites en (vooral) webshops maken er een sport van om contactgegevens zo goed mogelijk te verstoppen. Zo voorkomen ze een enorme druk op hun klantenservice. Voor sommige gebruikers is goede hulp erg belangrijk: bied ze daarom een helpende hand.

Helpinformatie

WCAG 2.2 moet helpinformatie op je website eenvoudig te vinden zijn. Dat kan bijvoorbeeld contactinfo zijn, maar ook een chatbot of FAQ kan hulp bieden. Je bent niet verplicht om dit aan te bieden, maar als je het doet, dan moet het altijd op dezelfde plaats vindbaar zijn.

de contactgegevens van cardan

Op veel webshops zie je “klikbare gebieden” die erg klein zijn of die elkaar overlappen. Voor je het weet heb je het verkeerde product in je winkelmandje liggen.

“Bellen is uiteindelijk veel sneller dan heel die site door. Maar het is vaak ook nog een kunst om het telefoonnummer te vinden!”

Peter (69)- syndroom van usher, is slechtziend, nachtblind en slechthorend

Tip 4: maak inloggen en formulieren invullen eenvoudiger

Gebruikersinvoer en conversie

Gebruikersinvoer en conversie is erg belangrijk voor de conversie van een website. Denk bijvoorbeeld aan een contactformulier of het afrekenen in een webshop. Help gebruikers daarom om fouten te vermijden en ze te verbeteren, ook als ze problemen hebben met het onthouden van gegevens.

A) Eenvoudiger inloggen

Op steeds meer websites moet je inloggen. Bijvoorbeeld om iets te kopen in een webshop of om je gegevens te wijzigen. Vanwege de veiligheid van de gegevens moet het inloggen niet te makkelijk zijn natuurlijk, maar voor sommige gebruikers wordt inloggen nagenoeg onmogelijk gemaakt. Dat komt bijvoorbeeld doordat ze een Captcha (zo’n “quizje”) moeten doen die ze niet kunnen zien of gewoon simpelweg niet begrijpen.

WCAG 2.2 moet inloggen makkelijker gemaakt worden voor gebruikers. Zo kun je o.a. een alternatieve mogelijkheid voor een zogenaamde “cognitieve test” (zoals Captcha) aanbieden, bijvoorbeeld inloggen via een link die je ontvangt per mail.

Screenshot van het inlogdeel van Marktplaats

Marktplaats maakt het mogelijk om in te loggen met Facebook of met je Google-account.

B) Niet alles dubbel invullen

Niets is zo irritant als dat je dezelfde gegevens meerdere keren moet invullen. Zeker als het invullen van die gegevens je veel moeite kost. WCAG 2.2 pakt zogenaamde “overtollige invoer” aan. Zo voorkom je dat bezoekers dezelfde informatie in hetzelfde proces meerdere keren moeten invullen.

Misschien herken je dit wel van het invullen van je factuur- en adresgegevens tijdens het afrekenen in een webshop. Hieronder zie je een voorbeeld van de “Coolbluekassa” op coolblue.nl.

Screenshot van de bezorggevens van coolblue

Op Coolblue.nl vul je eerst je e-mailadres in. In de volgende stap staat dit e-mailadres automatisch ingevuld. Ook kan je kiezen om de factuur te ontvangen op hetzelfde adres als waar je je pakketje naar toe stuurt. Twee keer invullen is dus niet nodig.

Meer informatie over de WCAG

Wij helpen je met de WCAG 2.2

Wil jij weten of jouw website of app al voldoet aan de nieuwe richtlijnen van de WCAG 2.2 AA? Of wil je meer kennis over deze WCAG richtlijnen? We helpen je graag op weg.

  • Volledig onderzoek

    Uitgevoerd volgens WCAG-EM, gebaseerd op WCAG 2.2, niveau AA.

  • Deelonderzoek content

    Ideaal als een volledige WCAG audit niet nodig is. Dit zoeken we samen uit.

  • Techniek onderzoek

    Is de content al onderzocht? Kies dan voor een techniek onderzoek.

  • WCAG Quickscan

    Krijg een eerste indruk van de stand van zaken met een kleine steekproef van je website of app.

  • App onderzoek

    Toets jouw app en krijg een rapport voor de toegankelijkheidsverklaring.

  • PDF onderzoek

    Controleer hoe toegankelijk jouw PDF documenten 
zijn opgemaakt.

  • Aanvullend onderzoek

    Perfect voor na een grote update of nieuwe functionaliteiten op je website, app of PDF-document.

  • Help!

    Kan je niet kiezen? Wij helpen je graag verder op weg met het maken van de juiste keuze.

    Neem contact op