WCAG 2.2: de nieuwste richtlijnen voor digitale toegankelijkheid (+ checklist!)

Sinds 5 oktober 2023 brengen de nieuwe WCAG-richtlijnen verandering in het online landschap. Digitale producten moeten aan nieuwe criteria voldoen om digitaal toegankelijk te zijn. Weten wat de impact is voor jou? In deze blog zetten we de belangrijkste veranderingen voor je op een rij!

Ga snel naar

• Wat is WCAG?
• Wat houdt WCAG 2.2 in?
• De 7 nieuwe richtlijnen van WCAG 2.2
• WCAG 2.2 checklist

Korte recap: wat is WCAG?

WCAG staat voor “Web Content Accessibility Guidelines”, oftewel: richtlijnen die de toegankelijkheid van webinhoud meten. Deze guidelines zijn opgesteld om websites en hun digitale inhoud toegankelijker te maken voor mensen met verschillende vormen van beperkingen, zowel lichamelijk als geestelijk. De richtlijnen zijn verdeeld in 3 niveaus van toegankelijkheid: 

• het basisniveau A;
• gevorderd niveau AA;
• het hoogste niveau AAA.

Voor meer details over WCAG, duik snel in deze blog over digitale toegankelijkheid!

Wat houdt WCAG 2.2 in?

Het opstellen van WCAG 2.2 begon in augustus 2020, toen de wereld midden in de COVID-19 pandemie zat. Als reactie op de opkomst van remote werken en onze afhankelijkheid van technologie, moesten de ontwikkelingen in digitale toegankelijkheid wel versnellen. De nieuwe versie van WCAG is een toevoeging op de bestaande criteria en niet een volledig nieuwe lijst.

Dit zijn de 7 nieuwe richtlijnen van WCAG 2.2

We nemen je mee door de 7 belangrijke succescriteria van WCAG 2.2. Deze criteria laten zien hoe gebruikers soepel en moeiteloos jouw website kunnen ervaren door bijvoorbeeld overbodige invoer te minimaliseren, FAQ’s gemakkelijk vindbaar te maken en lastige sleepbewegingen, buttons of inlog-manieren te vervangen.

1. Vermijd overbodige invoer (A)

Als je eerder al iets hebt ingevuld, zoals je naam of adres, dan vraagt de website dat niet opnieuw. Die informatie wordt automatisch opnieuw gebruikt of je kunt het zelf makkelijk kiezen. Let op: er zijn uitzonderingen waarbij je toch iets opnieuw moet invullen, namelijk:

• Als het echt nodig is voor wat je op dat moment doet;
• Als het nodig is om alles veilig te houden;
• Als de informatie die je eerder gaf niet meer klopt.

2. Contact ondersteuning herkenbaar op dezelfde plek (A)

Niet iedereen is in staat om een telefoonnummer te bellen voor bijvoorbeeld het maken van een afspraak of een reservering. Daarom stelt WCAG 2.2 dat het voor gebruikers makkelijk moet zijn om hulpmiddelen als een FAQ (Frequently Asked Questions), chatbot of contactinformatie te vinden. Het advies is om deze informatie op iedere pagina terug te laten komen, bijvoorbeeld in de header en/of de footer van de pagina. 

3. Alternatief voor slepende bewegingen (AA)

Het is niet voor iedereen mogelijk om een sleepbeweging (dragging movement) uit te voeren. Daarom moeten functionaliteiten die gebruik maken van een dragging movement, ook gebruikt kunnen worden met een enkele aanwijzing zonder te slepen. 
Een voorbeeld van een service met dragging movement is Google Agenda. Het maken en wijzigen van afspraken was voorheen afhankelijk van dragging-motion. Google Agenda heeft dit vervolgens opgelost door binnen de gesleepte componenten andere manieren te bieden om de afspraak naar een dag/tijd te bewegen.

4. Klikgebieden minimaal 24 x 24 px (AA)

Buttons op websites moeten groot genoeg zijn om er gemakkelijk op te kunnen klikken. Dit is extra belangrijk op je telefoon, waar het soms lastig is om op kleine buttons of links te klikken. Dit geldt vooral als ze (te) dicht bij elkaar staan. De nieuwe regels van WCAG 2.2 stellen dat de doelgrootte van een button een minimum van 24 x 24 pixels moet hebben en dat er voldoende ruimte tussen buttons moet zitten. 

5. Duidelijke focus weergave (AA)

Deze richtlijnen vertellen hoe groot en welke kleur een selectievak (dat helpt om te laten zien waar je bent op een website) minimaal moet zijn. Denk aan:

• Helderheid: zorg dat het geselecteerde onderdeel minimaal drie keer zo opvallend is als een button in neutrale status;
• Grootte: het selectievak moet een omtrek van minstens 1 pixels dik zijn, of een vorm die ten minste een lijn of vlak van vier pixels groot is;
• Opvallen tegen de achtergrond: zorg dat het selectievak goed te zien is in de kleuren eromheen.

6. Focus niet bedekken (AA en AAA)

Bezoekers met mobiliteitsbeperkingen kunnen, in plaats van een muis, gebruik maken van het toetsenbord. Hierbij is het van belang dat de bezoeker weet waar die zich op de pagina bevindt, de focus weergave. Door pop-ups, zoals een chatbot, kan deze focus weergave weleens worden bedekt. Niveau AA stelt dat een focusgebied niet volledig bedekt mag worden door content, zoals een chatbot, in de gebruikersinterface. Op het hoogste niveau, AAA, mag deze focus helemaal niet bedekt worden door andere content, ook niet gedeeltelijk.

7. Toegankelijke log-in (AA en AAA)

Inloggen moet zo makkelijk mogelijk worden gemaakt, zonder dat gebruikers informatie moeten onthouden, overschrijven of manipuleren. Toegankelijk inloggen wordt opgesplitst in twee niveaus:

• Niveau AA: een gebruiker moet ondersteuning krijgen voor wachtwoord- of eenmalige code-invoer. Dit kan onder andere door een copy-paste functionaliteit, integratie van wachtwoordmanagers (zoals Nordpass) of het automatisch invullen van gegevens in je browser.
• Niveau AAA: inloggen wordt zo nog eenvoudiger. Bezoekers kunnen gemakkelijker gegevens onthouden of deze zelfs helemaal niet in hoeven te voeren. Denk bijvoorbeeld aan biometrische identificatie methoden zoals gezichtsherkenning, stemherkenning en vingerscans. Daarnaast kunnen common identifiers, zoals je e-mail, naam of telefoonnummer, worden gebruikt om je wachtwoord gemakkelijker te onthouden.

WCAG 2.2 checklist: de impact op jouw organisatie

WCAG 2.2 tilt digitale toegankelijkheid naar een hoger niveau. We geven je een checklist van de criteria die waarschijnlijk de meeste impact hebben op jouw organisatie:

• Maak inloggen makkelijker
  Zorg ervoor dat je huidige inlogmethode voldoet aan de laatste richtlijnen. Denk alvast na over een gebruiksvriendelijke aanpak voor het inlogproces op jouw dienst, om frustratie voor je gebruikers te voorkomen.  Bang dat automatisch invullen met wachtwoordmanagers de veiligheid verlagen? Maak je geen zorgen; ze bevorderen juist het gebruik van sterke en unieke wachtwoorden, wat de beveiliging verhoogt!
• Help bij de focus van de gebruiker
  Er zijn nieuwe regels hoe de focus-indicator eruit moet zien. Dit kan betekenen dat jouw huidige ontwerp een kleine opfrisser nodig heeft. Een paar tips:
  • Een dikke zwarte rand rond een gefocust element geeft al genoeg contrast, bij een donkere achtergrondkleur gebruik je het contrast andersom (witte rand zwarte achtergrond);
  • Pas de achtergrondkleur van het hele element aan wanneer het de focus krijgt;
  • Bij twijfel over de zichtbaarheid van het gefocuste element, is het vaak onvoldoende.
• Maak hulpfuncties vindbaar
  De bereikbaarheid van jouw organisatie is cruciaal voor een optimale gebruikerservaring. Een duidelijke FAQ en contact informatie zijn hierbij essentieel. We geven een aantal concrete stappen die je kunt nemen:
  • Zorg dat een knop voor een chatbot op elke pagina op dezelfde prominente plek te vinden is;
  • Als er openingsuren in de footer staan, is het van belang dat dit op alle pagina’s het geval is;
  • Een georganiseerde FAQ zorgt voor een positieve online ervaring voor jouw gebruikers. Zorg er dus voor dat de lijst met veelgestelde vragen overzichtelijk en consistent opgebouwd is.

Dieper duiken in de wereld van WCAG 2.2 en digitale toegankelijkheid?

Aarzel niet om contact met ons op te nemen! We staan klaar om je te helpen bij het begrijpen en implementeren van deze nieuwe mogelijkheden.