De Web Content Accessibility Guidelines (WCAG) zijn de norm voor digitale toegankelijkheid over de hele wereld. Momenteel is de WCAG 2.1 de meest recente versie van deze toegankelijkheidseisen. De verwachting is dat het W3C de WCAG 2.2 in juni 2021 zal publiceren. Aan deze versie zijn een aantal succescriteria toegevoegd, die gericht zijn op het beter ondersteunen van mensen met een visuele, cognitieve- of leerbeperking. Ook zijn er nieuwe richtlijnen opgenomen speciaal voor e-boeken, mobiele devices en het gebruik van touchscreens.
Update 15 juli 2021: Een nieuwe datum voor publicatie van WCAG 2.2 is nog niet bekend, maar we verwachten dit in het najaar van 2021. De huidige versie is nog concept, daarom kunnen er nog onderwerpen gewijzigd worden na publicatie van dit artikel.
De richtlijnen van de WCAG 2.2 zijn nog in ontwikkeling. Zoals het er nu naar uitziet worden er 8 nieuwe succescriteria opgenomen van het type A en AA. Daarnaast wordt één succescriterium verplaatst van niveau AA naar A. De lijst van deze succescriteria is als volgt:
2.4.7 Focus visible (A)
Dit is geen nieuw succescriterium, maar het succescriterium wordt van niveau AA naar niveau A verplaatst.
Dit succescriterium vereist dat altijd zichtbaar is welk element focus krijgt. Het is mogelijk om de instellingen van de standaard browserfocus te gebruiken, maar zorg dat deze niet is verwijderd door het gebruik van “outline: none” in de CSS.
Als alternatief is het toegestaan om zelf een focus indicator te maken met goede zichtbaarheid. Het aanpassen van de link- en achtergrondkleur kan een goede manier zijn om dit te doen. Ook het toevoegen van een dikke rand om het actieve element is een goede optie. Het is ook mogelijk om deze twee opties met elkaar te combineren.
2.4.11 Focus visible (Minimum) (niveau AA)
Om aan dit nieuwe succescriterium te voldoen moet een zelfgemaakte focusindicator voldoen aan strengere eisen. Er zijn eisen voor het minimale oppervlakte van de focus indicator, de pixeldikte van randen en het contrastverschil tussen kleuren bij wel of geen focus.
Daarnaast mag de focus indicator niet volledig verborgen worden door, of overlappen met, andere content op het scherm. Hieronder volgt de vertaling van de voorlopige publicatie van het W3C.
Alle volgende punten zijn waar als componenten van de gebruikersinterface toetsenbordfocus ontvangen:
Minimale oppervlakte
De oppervlakte van de focus indicator is of:
- minimaal zo groot als de oppervlakte van een 1 CSS pixel dikke omtrek van de component zonder focus;
- of minimaal zo groot als een 4 CSS pixels dikke rand langs de kortste rand van een component zonder focus, en niet dunner dan 2 CSS pixels.
Verandering van contrast
- De pixels die de minimale focus indicator oppervlakte bepalen zorgen voor minstens een 3:1 contrast ratio tussen hun kleur in de gefocuste en niet-gefocuste toestand.
Aangrenzend contrast
- De pixels in de minimale focus indicator oppervlakte zorgen voor minstens een 3:1 contrast ratio met aangrenzende kleuren in de component met focus, of de minimale focus indicator oppervlakte heeft een dikte van minstens 2 CSS pixels.
Niet volledig bedekt
- De component met focus is niet volledig verborgen door content van de auteur.
Een toetsenbord focus indicator met een patroon of een kleurverloop mag delen bevatten die niet voldoen aan de 3:1 contrast ratio voor het verschil in contrast, zolang een oppervlakte ervan welke gelijk is aan het minimum wel voldoet aan de contrast ratio.
Als de component een zichtbare grens heeft die kleiner is dan het klikbare gebied wordt de grootte van de omvang bepaald door de zichtbare grens.
2.4.13 Fixed Reference Points (A)
Zaken als pagina-eindpunten en paginanummers moeten toegankelijk zijn en onveranderd blijven op dezelfde plaats in de inhoud. Dit helpt mensen te vinden waar pagina’s beginnen en eindigen, ook bij een afwijkende opmaak van de pagina.
2.5.7 Dragging (AA)
Om mensen met een motorische beperking te ondersteunen vereist dit nieuwe succescriterium dat slepen en neerzetten niet de enige manier is waarop bepaalde acties kunnen worden uitgevoerd.
Geef alternatieven voor slepen tenzij slepen essentieel is. Een voorbeeld hiervan is de mogelijkheid om prijzen in een zoekfilter aan te passen met de ‘ – ‘ en ‘+‘ knoppen.
2.5.8 Pointer Target Spacing (AA)
Er wordt een minimale afstand vastgesteld tussen twee interactieve elementen om de kans te verkleinen dat mensen per ongeluk het verkeerde element activeren. Dit succescriterium is een verbetering van 2.5.5 Doelgrootte, dat in de WCAG 2.1 op niveau AAA werd toegevoegd.
Elementen die kleiner zijn dan 44 pixels breed of hoog moeten tenminste een 44-pixel hoog en breed selectiegebied hebben. Een vierkant icoon van 24 pixels heeft bijvoorbeeld 10 pixels marge nodig aan alle kanten (10+24+10=44).
3.2.6 Findable Help (A)
Het criterium vereist dat wanneer ergens op de website of app hulpfuncties (zoals contactinformatie of een FAQ) beschikbaar zijn, deze informatie of een link ernaar, zich op elke pagina op dezelfde plaats bevindt; zowel visueel als in de code.
3.2.7 Hidden Controls (AA)
Bedieningselementen om een proces te voltooien, zoals knoppen voor het verzenden van een formulier, moeten duidelijk zichtbaar zijn. Dit helpt mensen snel te begrijpen hoe ze een taak moeten uitvoeren. Een betaalknop in een webshop mag bijvoorbeeld niet alleen zichtbaar zijn bij een ‘hovering’ met de muis.
3.3.7 Accessible Authentication (A)
Om ervoor te zorgen dat gebruikers gemakkelijker in kunnen loggen op websites vereist dit succescriterium dat het mogelijk is om jezelf te authenticeren zonder moeilijke stappen. Dit kan bijvoorbeeld door een functie toe te voegen waarmee gebruikers hun wachtwoord kunnen laten resetten via hun e-mailadres, in plaats van gebruik te maken van verificatiecodes die naar je telefoon gestuurd worden.
Daarnaast zijn gezichtsscans, toegang door middel van een vingerafdruk en gebruik van pincodes alternatieven. Tweestapsverificatie via USB, dat gebruikers toestaat om een knop in te drukken in plaats van typen, is een ander voorbeeld.
3.3.8 Redundant Entry (A)
In een proces met meerdere stappen vraag je de gebruiker niet meermaals om dezelfde informatie in te voeren. Dit moet ervoor zorgen dat het invullen van een formulier gemakkelijker wordt. Geef in een bestelformulier bijvoorbeeld de mogelijkheid om simpel aan te geven dat het factuuradres hetzelfde is als het verzendadres.
Wil je aan de slag met de digitale toegankelijkheid van jouw website of app? In het DDAI-register vind je aangesloten partijen die jou ondersteunen bij het toegankelijk maken van jouw diensten.
Bron: What’s New in WCAG 2.2 Working Draft | Web Accessibility Initiative (WAI) | W3C