Van WCAG 2.1 naar WCAG 2.2

Bijgewerkt op 13 juni 2024 om de namen van de succescriteria aan te passen aan de officiële Nederlandse vertaling.

Het World Wide Web Consortium heeft een nieuwe versie van de Web Content Accessibility Guidelines gepubliceerd. In versie 2.2 komen er 9 succescriteria bij (2 op niveau A, 4 op niveau AA en 3 op niveau AAA). Het succescriterium 4.1.1 Parsen verdwijnt.

Nieuwe succescriteria niveau A en AA

2.4.11 Focus niet bedekt (minimum) (niveau AA)

De component die focus heeft mag niet volledig verborgen worden door een andere component.

Voorbeelden zijn: sticky headers, cookiebanners, non-modal dialogs.

Citaat van een gebruiker

“Wanneer ik door de inhoud van de webpagina tab kan ik niet goed zien op welke links de focus ligt omdat de sticky header de inhoud deels verbergt.”

Understanding Focus Not Obscured (Minimum)

2.5.7 Sleepbewegingen (niveau AA)

Elke interface die een sleepbeweging gebruikt, biedt ook de mogelijkheid om dezelfde bewerking uit te voeren met één of meerdere muiskliks.

Dit succescriterium gaat over interfaces die sleepbewegingen met de muis gebruiken, bijvoorbeeld drag-and-drop uploaders of tabellen waarin je informatie kan sorteren door elementen met de muis te verslepen. Toetsenbordtoegankelijk zijn is niet voldoende om aan dit succescriterium te voldoen. Er moet echt een point-and-click alternatief aanwezig zijn.

Citaat van een gebruiker

“Ik kan mijn muisknop niet lang genoeg ingedrukt houden om een bijlage naar mijn mail client te slepen vanwege mijn tremors. Gelukkig kan ik dezelfde actie ook doen met eenvoudige muiskliks.”

Understanding Dragging Movements

2.5.8 Grootte van het aanwijsgebied (minimum) (niveau AA)

Het doelgebied van alle interactieve elementen heeft minstens een oppervlakte van 24px op 24px, behalve wanneer:

• Er geen overlap is met een ander doelgebied en er minstens 24 CSS pixels offset tussen beide doelgebieden zit
• Een ander element op de pagina dezelfde functie heeft
• Het doelgebied bevindt zich in een tekst (bijv. een link is meestal geen 24px hoog), in een lijst, of de grootte is afhankelijk van de lijnhoogte
• De grootte van het doelgebied wordt bepaald door de browser en kan niet worden aangepast
• Het is essentieel dat het doelgebied die grootte heeft of men mag de afstanden tussen de doelgebieden niet aanpassen (bijv. op een kaart waar locaties aangeduid zijn).

Het doel van dit succescriterium is om ervoor te zorgen dat je gemakkelijk een interactief element kan activeren zonder per ongeluk een ander element te activeren omdat bijvoorbeeld de knop te klein is of de link te dicht bij een andere link staat

Citaat van een gebruiker

“De sluitknop van die cookiebanner is heel klein waardoor het moeilijk is om die aan te klikken zonder per ongeluk op de knop ernaast te klikken.”

Understanding Target Size (Minimum)

3.2.6 Consistente hulp (niveau A)

Als een helpfunctie aanwezig is op verschillende pagina's van dezelfde website, moet die steeds ongeveer op dezelfde plaats terug te vinden zijn.

Voorbeelden van helpfuncties zijn contact details zoals een telefoonnummer of openingsuren, een link naar een contactformulier of naar een FAQ pagina, een chatbot.

Citaat van een gebruiker

“Ik was zeker dat het telefoonnummer en openingsuren van de winkel onderaan stonden want ik heb ze al gezien, maar ik vind ze nu niet meer terug.”

Understanding Consistent Help

3.3.7 Overbodige invoer (niveau A)

Als de gebruiker informatie heeft ingevoerd en opnieuw gevraagd wordt om dezelfde informatie in te voeren binnen hetzelfde proces moet:

• Ofwel, automatisch worden toegevoegd (autocomplete)
• Ofwel, beschikbaar zijn voor de gebruiker.

Uitgezonderd:

• Wanneer het opnieuw invoeren van informatie essentieel is
• Wanneer de informatie belangrijk is voor veiligheidsredenen
• Wanneer eerder ingevoerde info niet langer relevant is.

Het doel van dit succescriterium is om gebruikers te helpen een proces met meerdere stappen succesvol af te ronden door de cognitieve last te verminderen.

Citaat van een gebruiker

“Ik heb mijn telefoonnummer al ingevoerd en nu moet ik dat opnieuw doen. Ik begrijp niet goed waarom.”

Understanding Redundant Entry

3.3.8 Toegankelijke authenticatie (minimum) (niveau AA)

Het moet mogelijk zijn om zich aan te melden zonder een 'cognitive function test' uit te voeren.

Voorbeelden van cognitive function tests zijn:

• Karakters overschrijven
• Een puzzel oplossen
• Antwoord geven op een vraag waarbij de juiste spelling belangrijk is.

Wat mag wel?

• Een andere manier van aanmelden die geen cognitive function test bevat
• Een mechanisme toestaan dat gebruikers helpt om de cognitieve test uit te voeren
• Een cognitive function test die bestaat uit het herkennen van objecten
• Een cognitive function test waarbij de gebruiker niet-tekstuele inhoud identificeert die hij zelf al aan de website heeft toegevoegd.

Citaat van een gebruiker

“Ik kan geen paswoorden onthouden en geen rekensommen of puzzels oplossen. Laat me aanmelden met wat ik weet of laat mijn wachtwoordbeheerder het werk doen.”

Understanding Accessible Authentication (Minimum)

Nieuwe criteria niveau AAA

2.4.12 Focus niet bedekt (uitgebreid) (niveau AAA)

De component die focus heeft mag niet verborgen worden door een andere component.

Voorbeelden zijn: sticky headers, cookiebanners, non-modal dialogs.

Het verschil met het criterium op niveau AA is dat men voldoet aan dit criterium op niveau AA zolang de component nog deels zichtbaar is. Op niveau AAA mag de component op geen enkel moment bedekt zijn.

Citaat van een gebruiker

“De cookiebanner is zo gepositioneerd zodat ik niet kan zien welk element uit het navigatiemenu focus heeft.”

Understanding Focus Not Obscured (Enhanced)

2.4.13 Focusweergave (niveau AAA)

Het doel van dit succescriterium is ervoor zorgen dat de focus indicator duidelijk zichtbaar en waarneembaar is in zoveel mogelijk omstandigheden.

Er wordt voldaan aan dit succescriterium wanneer de zichtbare focus voldoet aan onderstaande punten:

• De focus is minstens even groot als het gebied van de (sub-)component met een perimeter van 2CSS pixels breed,
• en, het kleurcontrast tussen dezelfde pixels in focus en uit focus is minstens 3:1.

De perimeter is een solide lijn die de vorm van de component volgt, of de kleinste rechthoek die de component omvat.

Het kader hoeft niet specifiek 2CSS pixels breed te zijn zolang het voldoende oppervlakte beslaat. Een kader van 2CSS pixels solid is wel de eenvoudigste manier om aan dit succescriterium te voldoen.

De kleinst mogelijke 2CSS perimeter is binnen de omtrekt van de (sub-)component een solide lijn van 2 pixels direct tegen de rand van de component.

Je kan een aantal visuele voorbeelden en de berekeningswijze terugvinden in het understanding document van W3C voor dit succescriterium.

Citaat van een gebruiker

“Ik heb een motorische beperking waardoor ik enkel het toetsenbord kan gebruiken. Nu ik wat ouder word, gaat mijn zicht echter ook achteruit en kan ik de focus niet altijd goed zien. Het is dus belangrijk dat de focus goed zichtbaar is.”

Understanding Focus Appearance

3.3.9 Toegankelijke authenticatie (uitgebreid) (niveau AAA)

Het moet mogelijk zijn om zich aan te melden zonder een 'cognitive function test' uit te voeren.

Voorbeelden van cognitive function tests zijn:

• Karakters overschrijven
• Een puzzel oplossen
• Antwoord geven op een vraag waarbij de juiste spelling belangrijk is.

Wat mag wel?

• Een andere manier van aanmelden die geen cognitive function test bevat
• Een mechanisme toestaan dat gebruikers helpt om de cognitieve test uit te voeren

Het verschil met het criterium op niveau AA is dat voor het niveau AAA het herkennen van afbeeldingen of non-tekst elementen geen volwaardig alternatief is.

Citaat van een gebruiker

“Ik kan geen paswoorden onthouden en geen rekensommen of puzzels oplossen. Laat me aanmelden met wat ik weet of laat mijn wachtwoordbeheerder het werk doen.”

Understanding Accessible Authentication (Enhanced)