Overzicht nieuwe criteria WCAG 2.2

In de onderstaande tabel zijn de negen nieuwe criteria overzichtelijk weergegeven. Hieronder staat per criteria meer informatie weergegeven.

Indeling van criteria van de WCAG

De webrichtlijnen zijn, net als bij versie 2.1, onder te verdelen op verschillende manieren. Ten eerste zijn er drie niveau’s: niveau A, AA en AAA. De eerste twee niveau’s zijn verplicht voor (semi-)overheden en zullen vanwege de European Accessibility Act vanaf 2025 verplicht zijn voor webshops. Een andere manier om de criteria uit de WCAG op te delen, is in principes: waarneembaar, bedienbaar, begrijpelijk en robuust. Zo hebben criteria uit het principe bedienbaar bijvoorbeeld betrekking tot toetsenbordnavigatie, pauzeren van media en navigatie middels andere assisterende software.

Overzicht WCAG 2.2

Met de update van 2.2 wordt de totale lijst criteria aangevuld met negen nieuwe principes. In de onderstaande tabel staat een overzicht van alle criteria van de WCAG 2.2 verdeeld via principe en niveau.

WCAG 2.2 richtlijnen niveau A en AA

De onderstaande nieuwe richtlijnen zijn een aanvulling op de set verplichte richtlijnen voor (semi-)overheden. Bezoek de pagina ‘WCAG uitgelegd’ voor een compleet overzicht van de richtlijnen.

2.4.11: Focus verschijning (niveau AA)

In het kort: zorg dat de focus die toetsenbord gebruikers begeleidt duidelijk zichtbaar is en voldoet aan specifieke eisen omtrent grootte en kleurcontrast.

De doelgroep van de webrichtlijnen navigeert niet altijd op de standaard manier (muis en toetsenbord) door websites heen. Neem bijvoorbeeld toetsenbordgebruikers. Zonder de muis te gebruiken, is deze groep ook in staat om zijn/haar weg online te vinden. Tenminste, als ze zich op een toegankelijke website navigeren.

Via de tab-toets wordt de volgende selecteerbare optie gekozen, shift + tab stuurt de gebruiker naar de vorige keuze. Voor webdesigners en webdevelopers zijn er meerdere manieren om online navigatie voor deze groep gemakkelijker te maken.

Denk aan het bieden voor een skipmechanisme of veelvoorkomende items over te slaan (2.4.1), het aanbieden van content in de juiste volgorde (2.4.3) en het zichtbaar maken van de focus (2.4.7).

Versie 2.1 van de WCAG heeft criterium 2.4.7 (zichtbare focus) opgenomen in de lijst. Volgens dit criterium moet de focus van geselecteerde gebruikselementen zichtbaar zijn. Super handig voor toetsenbordgebruikers. Maar, er wordt niet aangegeven hoe de focus zichtbaar gemaakt moet worden. Theoretisch gezien voldoet een focus van 1 px groot onder de WCAG 2.1.

Voldoen aan 2.4.11

Volgens succescriterium 2.4.11 moet de focus van interactieve elementen voldoen aan de volgende voorwaarden:

• Contrastgebied: minstens een contrastverhouding hebben van 3,0:1 met de kleur die het element heeft wanneer het geen focus ontvangt.
• Minimaal gebied: het rand van het contrastgebied is minstens 1 CSS pixel dik óf de kortste zijde van de focusvorm is minstens 4 CSS pixels dik en over het algemeen niet dunner dan 2 CSS pixels.
• Aangrenzend contrast: het contrastgebied heeft een contrastverhouding van 3,0:1 ten opzichte van aangrenzende kleuren, zoals de achtergrondkleur, óf het contrastgebied heeft een dikte van ten minste 2 CSS-pixels.
• Niet volledig verborgen: het item van de gebruikersinterface dat focus krijgt is niet volledig verborgen door andere inhoud op de pagina.

2.4.12: Focus niet verborgen (minimum) (niveau AA)

In het kort: zorg dat de toetsenbord focus niet volledig bedekt is door content.

Ook het tweede criterium van de WCAG heeft betrekking op de focusweergave die toetsenbordgebruikers zien. Waar 2.4.11 betrekking heeft tot de zichtbaarheid van de focus ten opzichte van de achtergrond van de focus, gaat 2.4.12 over de relatie tussen de focus en aanvullende content.

Voorbeelden van dit soort content zijn sticky headers die meescrollen met de gebruiker, aanvullende menu’s die verschijnen of verschillende tabs op eenzelfde pagina.

Voldoen aan 2.4.12

Om te voldoen aan succescriterium 2.4.12 mag de focus niet volledig overlapt worden door andere content. Wanneer aanvullende content een gedeelte van de focus verbergt, maar een ander gedeelte van de focus nog zichtbaar is, kan er nog aan 2.4.12 worden voldaan.

Dit geldt niet voor criteria 2.4.13, dat stelt dat geen enkel onderdeel van de focus bedekt mag worden door andere content.

2.5.7: Sleepbewegingen (niveau AA)

In het kort: biedt toegankelijke alternatieve voor slepende bewegingen (drag-and-drop).

Een sleepbeweging maak je door met de muis op een map of een bestand te klikken en deze naar een ander venster te slepen. We noemen deze beweging ook wel drag-and-drop of sleur-en-pleur in het Nederlands.

Slepende bewegingen maken de werkzaamheden voor veel internetters gemakkelijker. Via sleepbewegingen kun je bijvoorbeeld eenvoudig afbeeldingen uploaden of bestanden delen. WeTransfer is hier een bekend voorbeeld van.

Voldoen aan 2.5.7

Niet voor iedereen is deze actie even eenvoudig uit te voeren. Neem bijvoorbeeld gebruikers met een mobiliteitsbeperking. Deze groep is niet altijd goed in staat om de sleepbeweging precies uit te voeren. De drag-and-drop methode vereist een redelijke precieze beweging met de muis.

Anderen zijn afhankelijk van assisterende invoerapparaten, zoals een hoofdaanwijzer of spraakgestuurde invoer. Voor deze groep zijn slepende bewegingen lastig of simpelweg onmogelijk uit te voeren.

Een website voldoet aan criterium 2.5.7 wanneer er een toegankelijk alternatief voor een sleepbeweging wordt geboden. In het geval van WeTransfer is dit een knop waarmee een bezoeker de verkenner kan openen. Hier selecteert de bezoeker eenvoudig de gewenste bestanden, om ze vervolgens te uploaden.

2.5.8: Doelgebied grootte (minimum)(niveau AA

In het kort: maak interactieve knoppen en inconen groot genoeg zodat fouten voorkomen worden.

De Engelse benaming van WCAG 2.5.8 is ‘target size minimum’, wat vrij vertaald ‘minimale doelgebied grootte’ in het Nederlands is. De term doelgebied slaat hier op een gebied op het scherm dat een gebruiker aantikt om een actie uit te voeren. Voorbeelden zijn knoppen, iconen naar de social media kanalen van een website of een vergrootglas om content te vergroten.

Voldoen aan 2.5.8

Succescriterium 2.5.8 is in het leven gebracht om het mensen gemakkelijk te maken om op een doel/target te tikken. Een klein doelgebied kan het moeilijk maken voor mensen met mobiliteitsproblemen of trillingen om het doel aan te tikken. WCAG 2.5.8 geeft specifieke eisen waaraan een doelgebied aan moet voldoen om toegankelijk te zijn. Doelgebieden, zoals knoppen en iconen, moeten minsten 24 bij 24 CSS pixels groot zijn. Er gelden vier uitzonderingen op WCAG 2.5.8:

1. Een doelgebied mag kleiner zijn dan 24 bij 24 pixels, als de ruimte tussen andere doelen maar minstens 24 pixels groot is.
2. Dit criterium is niet van toepassing op doelgebieden die in blokken tekst staan.
3. Als de grootte van de doelen essentieel is voor het doel, geldt 2.5.8 niet. Neem bijvoorbeeld Google Maps widgets waar veel rode pinnetjes op elkaar kunnen staan.
4. Content waarvan de grootte door browserinstellingen wordt bepaald, valt ook niet onder dit criterium.
5. Wanneer het doeleinde geen grootte van 24 bij 24 pixels heeft, maar een alternatief met dezelfde functie wel voldoet.

3.2.6: Consistente hulp (niveau A)

In het kort: beschikbare hulp, zoals een link naar de contactpagina of telefoonnummer, moet op iedere pagina op dezelfde plek terugkomen.

Dit principe is in het level gebracht om gebruikers te helpen om hun taken op een website te kunnen vervullen. Wanneer zij hulp nodig hebben bij deze taken, moeten zijn deze mogelijkheden eenvoudig kunnen vinden.

Vooral grote bedrijven zijn er goed in: het verstoppen van contactgegevens. Hoewel het een effectieve methode is om minder werkdruk op helpdesk medewerkers te leggen, is het voor consumenten minder plezierig.

De WCAG 2.2 stelt dan ook dat het voor gebruikers makkelijk moet zijn om hulpmiddelen als een FAQ (Frequently Asked Questions) of contactinformatie te vinden. Volgens 3.2.6 moet beschikbare hulp altijd op dezelfde plaats op webpagina’s worden weergegeven. Op alle pagina’s van de website dus. Denk hierbij aan contactgegevens boven in (de header) of juist onder in de website (de footer).

Voldoen aan 3.2.6

Om deze richtlijn te begrijpen, is het belangrijk om te begrijpen wat ‘hulp’ precies is en hoe je deze consistent op je website kan aanbieden. Hulp is hier niet alleen gericht op specifieke contactinformatie, zoals een telefoonnummer, maar ook op een link naar de contactpagina. Zolang op iedere pagina een link naar de contactpagina vindbaar is, weet een bezoeker altijd deze informatie te vinden. Ook een volledig geautomatiseerde chatbot of een FAQ-pagina met veelgestelde vragen en antwoorden zijn voorbeelden van hulp.

Dit criterium verplicht website eigenaren niet om een hulp mogelijk aan te bieden. Het stelt alleen dat als er hulp aanwezig is op een website, dit altijd consistent op dezelfde plek moet staan. Ook is het niet verplicht om altijd een medewerker beschikbaar te hebben om hulp te bieden. Als dit alleen op specifieke tijdstippen is, kan een website eigenaar dit vermelden op de contactpagina.

Het advies is om deze informatie of contactmogelijkheden op iedere pagina op dezelfde plek terug te laten komen, bijvoorbeeld in de header of de footer van de pagina.

3.3.7: Toegankelijke authenticatie (niveau AA)

In het kort: maak het gebruikers eenvoudiger om in te loggen en authenticatieprocessen te doorlopen.

WCAG 3.3.7 stelt dat het voor iedereen mogelijk moet zijn om functies als ‘wachtwoord vergeten’ te gebruiken op websites. De authenticatie moet dus voor alle bezoekers toegankelijk zijn. Vaak maken websites gebruik van cognitieve tests om spam en bots tussen de echte bezoekers uit te filteren.

Voorbeelden van cognitieve tests zijn bijvoorbeeld wachtwoorden die gebruikers moeten onthouden of CAPTCHA tests waarbij de bezoeker objecten in afbeeldingen moet herkennen.

Een praktijkvoorbeeld waar cognitieve tests worden toegepast, is bij de optie ‘wachtwoord vergeten’ op websites waar een gebruikersaccount nodig is. Volgens dit criterium mogen websites geen authenticatie-tests hanteren waarbij cognitieve tests uitgevoerd worden. Deze tests worden momenteel door websites gebruikt om ‘echte’ gebruikers te onderscheiden van bots.

Voldoen aan 3.3.7

Omdat de mogelijkheden voor authentificatie veelzijdig zijn, is er ook niet één manier om aan deze criteria te voldoen. Wanneer een inlognaam en wachtwoord worden gebruikt, moet een gebruiker in staat zijn om gegevens te kopiëren en plakken in het veld. Belangrijk is dat gebruikers niet gedwongen moeten worden om hun wachtwoord uit te typen.

Wanneer er een CAPTCHA test wordt gebruikt, moet de website ook een versie aanbieden die niet gebruik maakt van een cognitieve test. Een toegankelijke toepassing van CAPTCHA is in dit geval wanneer een gebruiker eigen afbeeldingen heeft kunnen uploaden voor de test.

Om te voldoen aan deze criteria, moet er dus minstens een van de volgende alternatieven aanwezig zijn voor een authenticatie middels een cognitieve test:

1. Een alternatief dat geen cognitieve test vereist, zoals een CAPTCHA test waarbij de gebruiker eigen afbeeldingen in heeft mogen sturen.
2. Een mechanisme waardoor gebruikers hulp kunnen krijgen bij de authenticatie.
3. Een test waarbij objecten herkent moeten worden, zoals een CAPTCHA test.
4. Een test gebaseerd op niet-tekstuele content die de gebruiker zelf heeft ingediend bij de website.

3.3.9: Overbodige invoer (Niveau A)

In het kort: zorg dat bezoekers informatie die ze al hebben ingevuld, niet nóg een keer hoeven in te voeren op je website.

Dit criterium heeft betrekking op processen die gegevens van bezoekers van een website vragen en uit meerdere stappen bestaan. Een voorbeeld van zo’n proces is een aankoop in een webshop. Vaak moeten consumenten hier én een factuuradres opgeven én een bezorgadres.

Als eerder ingevulde informatie op latere stappen vanzelf wordt ingevuld, vermindert dit de cognitieve inspanning die nodig is. Dit is helemaal handig voor gebruikers met bijvoorbeeld cognitieve- of geheugenproblemen.

Belangrijk voor dit criterium is de termijn waarop ingevulde gegevens bewaard moeten worden. De WCAG gaat hier uit van informatie die binnen het bezoek wordt ingevuld, zoals adresgegevens en betaalgegevens. Wanneer een gebruiker terugkomt op de site nadat het proces vroegtijdig beëindigd is, geldt dit criterium dus niet.

3.3.9 is ook van toepassing als een proces via meerdere domeinen verloopt. Een voorbeeld hiervan is een betaling die via een externe provider verloopt.

Voldoen aan 3.3.9

Zorg dat informatie die eerder door de gebruiker verstrekt is, op latere plekken óf automatisch ingevuld is, óf geselecteerd kan worden door de gebruiker. Een voorbeeld hiervan is een selectievakje met de tekst ‘Bezorgadres is hetzelfde als factuuradres’. In de volgende gevallen geldt 3.3.9 niet:

1. Situaties waarbij de toepassing specifiek vereist dat informatie vaker dan één keer wordt verstrekt.
2. Wanneer beveiliging van de informatie, de content of de applicatie zwaarder weegt dan toegankelijkheid.
3. Wanneer eerder ingevulde informatie niet meer geldig is.
4. Wanneer het toegankelijke authenticatie betreft.

WCAG 2.2 richtlijnen niveau AAA

Versie 2.2 van de WCAG heeft naar criteria uit niveau A en AA, ook twee nieuwe AAA criteria. Deze twee zijn niet verplicht voor (semi-)overheden.

2.4.13: Focus niet verborgen (verbeterd)

In het kort: Zorg dat de toetsenbord focus niet gedeeltelijk bedekt is door content.

Dit criterium is een aanvullin gop 2.4.13. Beide richtlijnen zijn gericht op de zichtbaarheid van de toetsenbord focus. Voor bezoekers die afhankelijk zijn van het gebruik van een toetsenbord, zoals mensen met mobiliteitsproblemen, is het zeer belangrijk om te weten welk element de focus ontvangt. Zonder zichtbare focus weten zij niet op welk gedeelte van de pagina ze zich bevinden.

Voldoen aan 2.4.13

Waar criterium 2.4.12 een verschil maakt tussen focus die gedeeltelijk bedekt is of volledig bedekt is, gaat 2.4.13 een stap verder. Om te voldoen aan 2.4.13 mag de focus helemaal niet bedekt worden door andere content, ook niet gedeeltelijk.

3.3.8: Toegankelijke authenticatie (geen uitzonderingen)

In het kort: Maak het gebruikers eenvoudiger om in te loggen en authenticatieprocessen te doorlopen.

Het tweede niveau AAA criterium is ook een aanvulling. 3.3.8 fungeert als een strengere versie van 3.3.7. Beide criteria hebben betrekking tot de toegankelijkheid van authenticatie. Bij criterium 3.3.8 gelden minder alternatieven voor een authenticatie middels een cognitieve test.

Voldoen aan 3.3.8

Zowel 3.3.7 en 3.3.8 stellen dat een website alternatieve inlogmogelijkheden moet bieden voor congitieve tests. Voorbeelden van cognitieve tests zijn bijvoorbeeld het onthouden van een wachtwoord of het oplossen van een puzzel als spamfilter. Om aan 3.3.8 te voldoen, moet een van de volgende twee alternatieven beschikbaar zijn wanneer er een cognitieve test wordt gebruikt:

1. Een alternatieve authenticatie die geen cognitieve test vereist, zoals een CAPTCHA test waarbij de gebruiker eigen afbeeldingen in heeft mogen sturen.
2. Een mechanisme waardoor gebruikers hulp kunnen krijgen bij de authenticatie.